Question

我是新手，我正在做一个应用程序以学习更好。我有一个关于绑定和过滤http调用结果的问题。在下面的代码中，我尝试绑定一些数据列表。

在服务中，我有这样的电话

 getTestFields(): Observable<Engagement[]> {
   return this.httpClient.get<Engagement[]>(this.url + '/testFields');
 }

它基本上返回一些测试字段的列表；在component.ts上，我将调用结果绑定到一个可观察变量。

dataSet$: Observable<Engagement[]>;
ngOnInit(): void {
  this.dataSet$ = this.service.getTestFields();
}

在html模板上，我将数据绑定如下：

<table class="table table-hover" *ngIf="dataSet$ | async as resultSet; else loading">
        <tr *ngFor="let item of resultSet" >
            <td>{{item.testName}}</td>
            <td>{{item.planned}}</td>
            <td>{{item.workingOn}}</td>
            <td>{{item.reviewed}}</td>
        </tr>   </table>

直到这里我都没问题；我成功获取数据并显示在表中。问题是过滤；我不知道该如何过滤已经从服务器获取的数据。我不想拨打服务器来过滤数据，我想过滤我已经得到的当前列表。

我尝试了类似下面的操作，但是没有用。

filter() {
    this.dataSet$ = this.dataSet$.pipe(
    switchMap(data => {
      return data.filter(p => p.planned)
    })
  );
 }

如何在不向服务器发送新呼叫的情况下过滤现有的可观察列表？

Answer 1

尝试结合数组map的rxjs filter运算符。

Map转换可观察对象，因此在这种情况下，我们使用它来转换数组以仅包含planned为true的项目。

import { map } from 'rxjs/operators';
.....
ngOnInit(): void {
  this.dataSet$ = this.service.getTestFields().pipe(
    map(data => data.filter(p => p.planned)),
  );
}

您还可以使用filter的{{1}}运算符filter发射来自Observable的辐射，但在这种情况下，我认为您不需要它。

================使用RxJS过滤器==================

rxjs

Answer 2

我同意AliF50，只是稍作调整，因为我假设您有一个过滤器按钮，或者一旦加载数据就想过滤掉。

dataSet$: Observable<Engagement[]>;
ngOnInit(): void {
 filter();
}

filter() {
    this.dataSet$ = this.service.getTestFields().pipe(
    map(data => data.filter(p => p.planned)),
  );
  );
 }

还有另一种情况，一旦加载数据，您再也不想去服务器了，那么您可能需要在组件级别进行订阅。

喜欢

dataSet: Engagement[];
ngOnInit(): void {
  this.dataSet = this.service.getTestFields().subscribe(response => this.dataSet = 
   response);
}

filter() {
    this.dataSet = this.dataSet.filter(data => data.planned === true)
  }

异步管道的Angular 9过滤结果

2 个答案: