angular - 如何使用 Observable 在 Angular8 中过滤具有多个条件的数组？

Question

想用 Observable 过滤 Angular8 中的对象数组。用@Pipe 做的，但客户建议使用 Observable。

我有一个数组。需要使用 UI 中给出的 3 个不同的输入对其进行过滤。使用下面的@Pipe 完成此操作。

<tr *ngFor="let d of data | filter : input1: input2: input3 >
    <td></td>
    <td></td>
    <td></td>
</tr>

但建议是使用可观察的。我们应该怎么做？

标签： angularrxjsrxjs6angular8angular2-observables

Answer 1

客户的意思是：

您可能在任何地方都有一个 http 请求，它将数据作为 observable 获取。目前，您可能订阅了您的 observable，这可以通过异步管道来避免。

无过滤器：

data$: Observable<Data> = this.myApiService.getData(); // do not subscribe here

<tr *ngFor="let d of data$ | async">
    <td></td>
    <td></td>
    <td></td>
</tr>

现在您要过滤此数据。您可以 rxjs-pipe 您未过滤的数据。

data$: Observable<Data[]> = this.myApiService.getData(); // do not subscribe here
filteredData$: Observable<Data[]> = this.data$.pipe(
  map((data: Data[]) =>
    data.filter((entry: Data) =>
      /* your filter condition, where you check input 1-3 */
    )
  ),
);

<tr *ngFor="let d of filteredData$ | async">
    <td></td>
    <td></td>
    <td></td>
</tr>