Angular 7: фильтрация результатов поиска на нескольких ключах с использованием асинхронного канала

Question

Я хотел бы знать, как фильтровать результаты поиска, используя более одного свойства объекта, используя асинхронный канал. В настоящее время я могу фильтровать на основе свойства name и отображать отфильтрованные результаты, но я также хотел бы иметь возможность поиска по свойству username. Вот что у меня есть: в моем файле TS:

  public formSetup = this.fb.group({
    formSearch: new FormControl('')
  })

  constructor(private service: Service,
              private fb: FormBuilder) { }

  ngOnInit(): void {
   this.getFilters();
  }

  public getFilters() {

    const filter = (val: string): Observable<Array<object>> => {

      return this.service.getItems()
        .pipe(
          map(response => response.filter(option => {
            const value = `${option.name}`
            return value.toLowerCase().indexOf(val.toLowerCase()) === 0;
          }))
        );

    }

    this.filteredItems = this.formSetup.get('formSearch').valueChanges
      .pipe(
        startWith(null),
        debounceTime(200),
        distinctUntilChanged(),
        switchMap(val => {
          return filter(val || '');
        })
      );
  }

в моем файле HTML:

  <input type="text" formControlName="formSearch">
</div>

<search [items]="filteredItems"></search>

И, наконец, в моем компоненте, который отображает результаты:

<search-card *ngFor="let item of (items | async ); trackBy:trackingFn" [items]="item"></search-card>

Answer 1

Вы можете изменить метод filter(), чтобы также искать свойство username.

return this.service.getItems()
  .pipe(
     map(response => response.filter(option => {
       const value = `${option.name}`;
       const username = `${option.username}`;
       return value.toLowerCase().indexOf(val.toLowerCase()) === 0 ||
         username.toLowerCase().indexOf(val.toLowerCase()) === 0;
     }))
   );