Question

我可以观察到：

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

我使用以下方法向该观察者添加数据

 this.events$.next([{"id": 1}, {"id": 2}, {"id": 3}]);

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

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

我尝试使用此方法删除

：

  public delete(event: IEvent): void {
    this.confirm
      .open({})
      .pipe(
        filter(Boolean),
        concatMap(() => this.eventService.delete(event))
      )
      .subscribe((updated) => this.eventService.next(updated));
  }

服务是

  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)
            )
          )
        )
      );
  }

Answer 1

您不能从Observable中删除一个项目，必须发出一个没有删除项目的新值。您组件中的方法可能如下所示：

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);
}

在更新帖子后进行编辑：

您的问题是您没有使用delete方法更新events $主题，例如在此处使用tap或使用subscription方法：

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) => {});
  }

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

1 个答案: