InvalidPipeArgument： for pipe 'AsyncPipe'

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管道上的角度文档：

async管道订阅Observable或Promise，并返回它发出的最新值。当发出新值时，async管道会标记要检查的零部件以进行更改。当组件被破坏时，async会自动管道unsubscribe，以避免潜在的内存泄漏。

但从您的属性声明来看，它似乎是一个Array。所以它不会起作用。

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

类似这样的东西：

timers: Observable<ITimer[]>;

现在，它将取决于如何初始化timers属性。不管你怎么做，只要确保它是Observable

更新：

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

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>

---

这里有一个工作样本StackBlitz供您参考。

或者

您也可以创建行为主题>：

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

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

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>

---

这里有一个更新的StackBlitz供您参考。