有一个Observable的地方数组:
places: Observable<Array<any>>;
在模板中,它与异步管道一起使用:
<tr *ngFor="let place of places | async">
...
</tr>
在一些用户操作之后,我需要从此数组中删除具有特定id的位置.我的代码中有这样的东西,但它不起作用:
deletePlace(placeId: number): void {
this.apiService.deletePlace(placeId)
.subscribe(
(res: any) => {
this.places
.flatMap((places) => places)
.filter((place) => place.id != placeId);
},
(err: any) => console.log(err)
);
}
你能帮帮我吗?
解决方法:
你不能这样做,因为你不能“更新”一个observable(即它不保持状态),但你可以通过它对事件作出反应.
对于您的用例,我将利用扫描运算符并将两个流合并为一个:
>一个用于初始加载
>另一个用于删除事件.
这是一个示例:
let obs = this.http.get('/data').map(res => res.json());
this.deleteSubject = new Subject();
this.mergedObs = obs.merge(this.deleteSubject)
.startWith([])
.scan((acc, val) => {
if (val.op && val.op==='delete') {
var index = acc.findIndex((elt) => elt.id === val.id);
acc.splice(index, 1);
return acc;
} else {
return acc.concat(val);
}
});
要触发元素删除,只需发送关于主题的事件:
this.deleteSubject.next({op:'delete', id: '1'});
看到这个plunkr:https://plnkr.co/edit/8bYoyDiwM8pM74BYe8SI?p=preview.