Cloning data - ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Question

我正在尝试从 NGRX 存储中克隆数据，以便我可以对其进行编辑。

声明

public stuff$: Observable<StuffModel> | undefined;
public editableStuff$: Observable<StuffModel> | undefined;

TS

ngOnInit() {
    this.editableStuff$ = Object.assign(
      {},
      (this.stuff$ = .........
          id === 'newStuff'
            ? of(this.newStuff)
            : this.store.pipe(
                ...............
                select((entities) => entities[id] ?? ({} as StuffModel))
              )
        )
      ))
    );
  }

HTML

<ng-container *ngIf="editableStuff$ | async as stuff">
...
<input
          matInput
          placeholder="Stuff"
          [(ngModel)]="stuff.stuffName"
        />

问题是我收到错误 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' 并且不知道为什么。当我使用 <ng-container *ngIf="stuff$ | async as stuff"> 时它可以工作，但我怎样才能让它与 editableStuff$ 一起工作？当我使用 JSON.stringify() 控制日志机器人变量 stuff$ 和 editabelStuff$ 时，它们是相同的。

Answer 1

您正在使用 Object.assign，它创建了一个对象，所以您现在拥有的是一个包含可观察对象的对象 。如果你想复制一个 observable，一个 map 就足够了，所以像这样（简化）：

this.editableStuff$ = this.stuff$.pipe( map(item => ({ ...item })) );

我们使用扩展运算符复制项目的地方。

Cloning data - ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Cloning data - ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

clone

observable

typescript

ngrx

angular