Фильтрация массива объектов с использованием фильтра Observable

Я пытаюсь найти правильный способ фильтрации массива объектов с помощью RxJS 6.

Вот сценарий. У меня есть users: User [] , filter: FormControl и другой массив FilterUsers: User [] . Я хотел бы отфильтровать список пользователей по значению, содержащемуся в filter . Единственный способ, которым я смог понять это, - это использовать tap , и хотя это работает, это просто не похоже на правильный способ сделать это ... плюс весь список "фильтруется" out ", пока элемент управления фильтра не получит свое первое значениеChange.

this.filter.valueChanges.pipe(
  tap((term) => {
    this.filteredUsers = this.users.filter(u => u.name.indexOf(term) != -1)
  })).subscribe()

Любая помощь будет принята с благодарностью.

1

2 ответы

вы правы, что тап не "правильный" способ сделать это ... правильный путь - сделать это в подписке ...

this.filter.valueChanges.pipe(startWith('')).subscribe(
  (term) => {
    this.filteredUsers = (term) ? this.users.filter(u => u.name.indexOf(term) != -1) : this.users;
});

и добавить пустую проверку, которая не фильтруется, и начать с того, что запускает поток. сделано и сделано. Не добавляйте сложность там, где она вам не нужна. rxjs рекомендует, чтобы побочные эффекты возникали в вашей функции подписки, все остальное ДОЛЖНО быть преобразующим/функциональным, а установка значения на контроллере является побочным эффектом.

Если вы хотите по-настоящему реагировать, вы можете добавить асинхронную трубу для хорошей меры

this.filteredUsers$ = this.filter.valueChanges.pipe(startWith('')).tap(
  (term) => {
    return (term) ? this.users.filter(u => u.name.indexOf(term) != -1) : this.users;
});

тогда в HTML вместо

*ngFor="let user of filteredUsers"

делать:

*ngFor="let user of filteredUsers$ | async"

Преимущество здесь - автоматическая очистка подписки и улучшенная поддержка обнаружения изменений.

2
добавлено

Просто переместите функцию крана в подписку:

this.filter.valueChanges.subscribe((term) => {
    this.filteredUsers = this.users.filter(u => u.name.indexOf(term) != -1)
  });
0
добавлено
Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs