Angular - автозаполнение поиска не работает должным образом

Question

У меня проблемы с реализацией окна поиска с автозаполнением с использованием Angular. В моем окне поиска автозаполнение показывает полные списки контактов, хотя из console.log я вижу, что фильтр работает правильно. Я думаю, что это связано с некоторыми проблемами, связанными с наблюдаемыми, но я не уверен, где и что изменить, и я застрял на некоторое время.

ngOnInit() {
  this.contactsForm = this.fb.group({
    userInput: null
  }); 
this.filteredContacts = this.contactsForm
  .get('userInput')
  .valueChanges
  .pipe(
    startWith(''),
    debounceTime(300),
    switchMap(value => {
      if (value !== '') {
        return this.search(value);
      } else {
        return of(null);
      }
    })
  );
}

Это моя функция поиска, из console.log я вижу, что фильтр работает правильно, но в методе ngOnInit получает весь список контактов, и поэтому при автозаполнении я получаю все имена.

search(value: string): Observable<Contact[]> {
    return this.apiService.getContacts().pipe(
      tap((contacts: Contact[]) => {
        contacts = contacts
          .map(contact => new Contact(contact._id, contact.type, 
contact.name, contact.address))
      .filter(contact => contact.name.includes(value))
    console.log({contacts})
    return contacts;
  })
);
}

Полный код доступен здесь: https://github.com/nicolagheza/gestionalino-frontend/tree/develop

Спасибо за ваше время. Nicola.

Answer 1

Замените tap на map в вашем search методе.

tap просто позволяет вам делать вещи с выдаваемыми значениями, но не меняет их в процессе. map делает, однако.