Question

  timers: Observable<ITimer>[]=[];

模板是：

<div *ngFor="let item of timers | async">
  {{ item.time }}
  <div (click)="remove(item.index)">Remove</div>
</div>

为什么会出现此错误？

如果未初始化this.timers，则异步有效。另外，我无法使用这种方法：

 add() {
    let options = {
      finishDate: null,
      time: null,
      index: this.timers.length
    };

    this.timers.push(this.create(options));

  }

在一行：index: this.timers.length

Answer 1

从async管道上的Angular Docs：

async管道订阅Observable或Promise并返回其发出的最新值。发出新值时，async管道标记要检查的组件是否有更改。销毁组件后，async管道unsubscribe会自动运行，以避免潜在的内存泄漏。

但是从您的属性声明中，它似乎是Array。这样就行不通了。

请勿在此处初始化timers属性，并将timers的类型更改为Observable<ITimer[]>

类似这样的东西：

timers: Observable<ITimer[]>;

现在，这取决于您如何初始化timers属性。但是，您只要确保它是Observable

更新：

根据您的用例，您可以将其制作为Observable数组。这是您已经拥有的东西。

timers: Observable<ITimer>[]=[];

您只是在错误的位置使用async管道。试试这个：

<div *ngFor="let item$ of timers">
  <div *ngIf="(item$ | async) as item">
    {{ item.time }}
    <div (click)="remove(item.index)">Remove</div>
  </div>
</div>

这是您推荐的Working Sample StackBlitz。

或者

您还可以创建一个BehaviorSubject>：

timersArray: ITimer[] = [];
timers$: BehaviorSubject<Array<ITimer>> = new BehaviorSubject<Array<ITimer>>(this.timersArray);

然后添加时，可以先在timersArray上调用BehaviorSubject方法来更新next，然后更新timers$流：

add() {
  let options = {
    finishDate: null,
    time: new Date(),
    index: this.timers.length
  };
  this.timers.push(this.create(options));
  this.timersArray.push(options);
  this.timers$.next(this.timersArray);
}

然后您可以在模板中使用它：

<div *ngFor="let item of (timers$ | async)">
  {{ item.time }}
  <button (click)="remove(item.index)">Remove</button>
</div>

这里是Updated StackBlitz供您参考。

InvalidPipeArgument：''用于管道'AsyncPipe'

1 个答案:

更新：

或者