通过添加，过滤或删除项目来更新可观察到的Rxjs数组

问题描述

我的UI中显示了一些卡片。

<div *ngFor="let item of cards | async">...</div>

卡片将是类型卡片阵列的可观察对象。

所以我有一个card接口，可以说它具有3个属性

编号，名称，说明。

我的用例是。

1. 我想将新卡添加到observables阵列中，并且必须反映到阵列中。

2. 我想从可观察的地方删除卡，并且必须反映到模板中。

3. 我必须能够过滤根据说名字的名片，并且必须反映在模板中。

简而言之，所有的开孔都必须在可观察的范围内完成，因为我已经在模板中使用了异步管道。

解决方法

为此，您可以使用map rxjs运算符，如下所示：

  cards$: Observable<Card[]>;

  constructor(private serivce: CardService) { }

  ngOnInit(): void {
    this.cards$ = this.serivce.getCards();
  }

将项目添加到可观察数组

  // add item with id=6
  addItemToObservable() {
    this.cards$ = this.cards$.pipe(map(data => {
      return [...data,{ id: 6,name: 'name-6',description: "description-6" }]
    }))
  }

从可观察数组中删除项目

  removeItemFromObservable({id}) {
    this.cards$ = this.cards$.pipe(map(data => {
      return data.filter(item => item.id !== id)
    }))
  }

最后在您的HTML中：

<ng-container *ngIf="(cards$ | async) as cards">
  <table>
    <tr *ngFor="let item of cards">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>
         <button type="button" (click)="removeItemFromObservable(item)">
              Remove
          </button>
      </td>
    </tr>
  </table>
</ng-container>


<button type="button" (click)="addItemToObservable()">
  Add
</button>