小编dra*_*ind的帖子

我有两个组件。

1. 项目列表——用于显示项目列表（父级）
2. Item——单个项目（子项）的包装

在 中Item List component，我基本上使用服务创建了一个可观察的对象。函数 getItems() 返回项目的可观察值：

items$: Observable<Item[]>;

ngOnInit() {
  this.items$ = this.service.getItems();
}

在模板中，我使用异步管道执行 ngFor 来显示项目列表：

<div *ngFor="let item of items$ | async">
    <card-item [item]="item"></card-item>
</div>

现在，Item component我可以选择从 firestore 数据库中删除该特定项目：

@Input() item: Item;

removeItem() {
    this.service.removeItem(this.item.id);
}

此操作需要一些时间，因此我想从父组件的可观察对象中“本地”删除它。

我可能必须过滤父组件中的可观察值，并以某种方式返回一个新的过滤可观察值，但我不知道如何从子组件中管理它？

removeItem() {
    // remove from firestore, but this can take some time

    this.service.removeItem(this.item.id);

    // meanwhile... remove it from the observable on parent

    source.pipe(filter(item => item.id !== this.item.id)); // here is the problem I …