Angular 如何从可观察数组中删除项？

我观察到：

private events$: BehaviorSubject<IEvent[]> = new BehaviorSubject<IEvent[]>([]);

如何从模板中删除可观察数组中的项

<div *ngFor="let item in events | async">
   <span (click)="detele(item)">Delete</span>
</div>

服务是：

  public delete(event: IEvent): Observable<any> {
    return this.eventsService
      .delete(event)
      .pipe(
        concatMap(() =>
          this.events$.pipe(
            map((events: IEvent[]) =>
              events.filter((e) => e.idEvent !== event.idEvent)
            )
          )
        )
      );
  }

公共删除（事件：IEvent）：可观察{
返回此.events服务
.删除（事件）
.烟斗(
concatMap（（）=>
此.events$.pipe(
映射（（事件：IEvent[]）=>
events.filter（（e）=>e.idEvent！==event.idEvent）
)
)
)
);
}

您不能从可观察对象中删除项目，您必须在没有删除项目的情况下发出新值。组件中的方法可能如下所示：

delete(item) {
  // Get current items from the BehaviorSubject.
  const currentItems = this.events$.getValue();
  // Use the id of the argument item to remove it from the currentItems.
  const itemsWithoutDeleted = currentItems.filter(({id}) => id !== item.id));
  // Emit the new array.
  this.events$.next(itemsWithoutDeleted);
}

更新帖子后编辑：

您的问题是，您没有在删除方法中更新事件$subject，例如，您可以使用点击此处或使用订阅方法：

public delete(event: IEvent): void {
    this.confirm
      .open({})
      .pipe(
        filter(Boolean),
        concatMap(() => this.eventService.delete(event))
        // Use tap here to update the events$.
        tap((items) => {
          this.events$.next(items);
        })
      )
      .subscribe((response) => {});
  }

---

好的，为什么我的方法不起作用，看我更新的问题这里缺少$是一个错误，所以事件而不是事件$：是的，谢谢，你能评论我的版本吗，我已经添加了我的样本我也编辑了我的帖子-你必须更新你的事件$主题。没有办法从观察中删除项目。但是，RxJS库中有一些操作符，如

过滤器

和

跳过

，可以过滤/省略您从可观察对象请求的任何值，但这些值仍将保留在原始的

可观察对象

中。我不确定你想达到什么目的，但这在特定情况下可能会有所帮助。

delete(item) {
  // Get current items from the BehaviorSubject.
  const currentItems = this.events$.getValue();
  // Use the id of the argument item to remove it from the currentItems.
  const itemsWithoutDeleted = currentItems.filter(({id}) => id !== item.id));
  // Emit the new array.
  this.events$.next(itemsWithoutDeleted);
}

public delete(event: IEvent): void {
    this.confirm
      .open({})
      .pipe(
        filter(Boolean),
        concatMap(() => this.eventService.delete(event))
        // Use tap here to update the events$.
        tap((items) => {
          this.events$.next(items);
        })
      )
      .subscribe((response) => {});
  }