如何使用 Observable 在 Angular 8 中使用多个条件过滤数组？

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>

但是推荐使用observable。我们该怎么做？

Answer 1

客户的意思是：

您可能在任何地方都有一个 http 请求，它以可观察的形式获取数据。目前您可能订阅了您的可观察对象，这可以通过异步管道避免。

没有过滤器：

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>

如何使用 Observable 在 Angular 8 中使用多个条件过滤数组？

How can I filter array with multiple criteria in Angular8 using Observable?

rxjs

angular2-observables

angular

rxjs6

angular8