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

感谢您的宝贵时间。尼古拉。

Answer 1

在您的tap方法中用map替换search。

tap仅允许您使用发出的值进行处理，但不能在过程中更改它们。 map可以。

角度-自动填充搜索无法正常运行

1 个答案: