Фильтр свойств недоступен для типа Observable <any>несмотря на импорт

Question

Я хочу отфильтровать список имен, которые я получаю из API. Я хочу сделать это с оператором фильтра. Но я получаю эту ошибку:

> Property filter is not available for type Observable<any>

несмотря на импорт

import { map, filter } from 'rxjs/operators';

Я взял этот урок Джоша Морони как ориентацию: https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/

Мой код:

service.ts

  getList(): Observable<any> {
        return this.http.get(this.url);
      }

page.ts

 public searchTerm: string = "";
 userList: Observable<any>;

ngOnInit() {

    this.getAllUsers();
}


  getAllUsers() {
    this.userList = this.userService.getList()
    .pipe(map(response => response.results));
  }


filterUsers (searchTerm) {
  return this.userList.filter (user => {
    return user.username.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
}

SearchList() {
  this.userList = this.filterUsers (this.searchTerm);
}

page.html

<ion-searchbar mode="ios" class="items-searchbar" animated mode="ios" [(ngModel)]="searchTerm" (ionChange)="searchList()" placeholder="Filter by name..."></ion-searchbar>

Answer 1

Существует разница между оператором фильтра в RxJS и Array.filter () в JavaScript.

Оператор RxJS filter исключает наблюдаемое из потока, который удовлетворяет определенному условию, тогда как Array.filter() фильтрует / удаляет объекты или значения из массива на основе определенного условия

ДляВ целях вашего вопроса вам необходимо подписаться на наблюдаемую userList, прежде чем фильтровать возвращаемые наблюдаемые. Это когда вы можете вернуть отфильтрованные результаты, которые будут использоваться для метода SearchList.

filterUsers(searchTerm) {
  this.userList.subscribe(res => {
    const result = res.filter(user => {
      return user.username.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
    return result; 
  }); 
}

SearchList() {
  this.userList = this.filterUsers(this.searchTerm);
}

Answer 2

Вы должны использовать фильтр внутри pipe (), после map ()