通过添加、过滤或删除项目来更新数组的 Rxjs 可观察对象答案

【问题标题】：Update Rxjs observable of array by adding ,filtering or deleting items通过添加、过滤或删除项目来更新数组的 Rxjs 可观察对象
【发布时间】：2020-10-01 18:48:59
【问题描述】：

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

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

很明显，cards 将是 card 类型数组的 Observable。

所以我有一个卡片接口，可以说它有 3 个属性

ID、名称、描述。

我的用例是。

我想将新卡添加到 observables 数组中，并且必须反映到数组中。
我想从 observable 中删除卡片，并且必须反映到模板中。
我必须能够过滤基于姓名的卡片，并且必须反映在模板中。

简而言之，所有的操作都必须在 observable 中完成，因为我在模板中使用了异步管道。

【问题讨论】：

标签： angular observable rxjs-observables rxjs-pipeable-operators

【解决方案1】：

为此，您可以使用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>

【讨论】：