Каков наилучший способ создать отдельный наблюдаемый поток, подписаться на него в шаблоне и выполнить все операции CRUD в одном потоке?

Question

У меня есть компонент под названием товары.Я хотел бы иметь возможность: 1. иметь один наблюдаемый поток, на который я могу подписаться в шаблоне моего компонента, используя асинхронный канал 2. выполнить операции Create, Retrieve, Update и Delete для элементов внутри массива потока и выдатьобновленный массив в этом потоке.

Это заменило бы мою текущую реализацию необходимости подписываться и отписываться от сервисных методов, которые в настоящее время выполняют это действие для меня и в 'recipe' или в операторах pipe-способны в компоненте,Теперь я обновляю массив в компоненте и связываюсь с этим массивом в шаблоне.

Например, в моем компоненте у меня есть следующее:

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>