Question

我有一个称为商品的组件。我希望能够： 1.使用异步管道在组件模板中订阅一个可观察的流 2.对流数组中的项目执行创建，检索，更新和删除操作，并在该流中发出更新后的数组。

这将替代我当前的实现，即必须订阅和取消订阅当前对我以及组件中的“配方”或可管道运算符中执行此操作的服务方法。现在，我更新组件中的数组并绑定到模板中的该数组。

例如，在我的组件中，我有以下内容：

onSubmit(){
this.merchandiseService.createGearItemAction(this.gearItem);
}

在我的服务中，我有以下内容：

private newGearItemAction: Subject<GearItem> = new Subject<GearItem>();

  createGearItemAction(gearItem: GearItem | null): void {
    this.newGearItemAction.next(gearItem);
  }

然后，我希望能够执行类似的操作，但是对于任何CRUD操作，不仅要创建（在service.ts文件中）

gearItemsLatest$ = combineLatest([
    this.newGearItemAction,
    this.merchandiseGearItems$
  ]).pipe(
    map(([newGearItem, gearItems]: [GearItem, GearItem[]]) => {
      console.log("trying to post");
      this.http.post<GearItem>(
        this.merchandiseGearItemsUrl,
        JSON.stringify(newGearItem)
      );
      gearItems = [...gearItems, newGearItem];
      return gearItems;
    })
  );

我该如何实现？

Answer 1

添加新项不会使最新项持久化，我将使用单个行为主题并将结果推送到其中。

gearItems$ = new BehaviorSubject<GearItem[]>([]);

add(gearItem: GearItem) {
  this.gearItems$.next([...this.gearItems$.getValue(), gearItem]);
}

在您的组件中，您只需添加可观察的

gearItems$ = this.merchandiseService.gearItems$;

并在视图中显示带有异步管道的gearItems $

<ng-container *ngIf="gearItems$ | async as gearItems">
  <div *ngFor="let gearItem of gearItems">{{gearItem | json}}</div>
</ng-container>

创建单个可观察流，在模板中进行订阅并在同一流上执行所有CRUD操作的最佳方法是什么？

1 个答案: