Angular 9 фильтр результатов асин c трубы

Question

Я новичок в angular, и я делаю приложение, чтобы учиться лучше. У меня проблема с привязкой и фильтрацией результатов 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

Попробуйте оператор rx js map в сочетании с массивом filter.

Карта преобразует наблюдаемое, поэтому в этом случае мы используем его для преобразования массива, включающего только элементы, в которых planned истинно.

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

Вы также можете filter выбросы из Наблюдаемого, используя оператор filter для rxjs, но я не думаю, что вам это нужно в этом случае.

================ Использование Rx JS Фильтр ===================

import { filter } from 'rxjs/operators';
...
ngOnInit(): void {
  this.dataSet$ = this.service.getTestFields().pipe(
    // make sure data is truthy and has a length before emitting to 
    // the consumer (in this case it is the HTML).
    filter(data => !!data && !!data.length),
  );
}

Answer 2

Я согласен с AliF50, просто немного подправлю, поскольку я предполагаю, что у вас есть кнопка фильтра или вы хотите отфильтровать ее после загрузки данных.

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

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

Существует еще один сценарий, когда вы никогда не захотите go на сервер после загрузки данных, тогда вам, вероятно, потребуется подписаться на уровне компонента.

как

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

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