ngbTypeahead 搜索结果丢失

Question

我目前正在编写 ngbTypeahead 搜索，但我被困住了，因为我从未真正使用过 Observables，这是 ngbTypeahead search 的预期返回类型。

我的组件中的搜索功能是这样的：

  search: OperatorFunction<string,  readonly LoqateResponseModel[]> = (text$: Observable<string>) => {
return text$.pipe(
  switchMap(term => this.addressService.searchAddress(term, this.countryCode)),
  map(results => {
    const searchResults = results[LoqateKeyEnum.ITEMS] as [];
    const searchResultLoqateModels: LoqateResponseModel[] = [];
    searchResults.forEach(result => {
      searchResultLoqateModels.push(new LoqateResponseModel(
        result[LoqateKeyEnum.ID],
        result[LoqateKeyEnum.TYPE],
        result[LoqateKeyEnum.TEXT],
        result[LoqateKeyEnum.HIGHLIGHT],
        result[LoqateKeyEnum.DESCRIPTION]));
    });
    return searchResultLoqateModels;
  })
);

}

resultFormatter = (loqateResponse: LoqateResponseModel): string => loqateResponse.display();

我正在进行 loqate 搜索，并将结果作为模型对象存储在列表中并返回。

public searchAddress(searchValue, countryCode): Observable<object> 
  {
    const httpParams = new HttpParams();
    return this.httpClient.post(this.addressSearchUrl, {}, {
      headers: this.headers,
      params: new HttpParams()
        .set('Key', loqateKey)
        .set('Text', searchValue)
        .set('Origin', countryCode)
    });
  }

模型如下所示：

export class LoqateResponseModel {
  constructor(
    public id: string,
    public type: LoqateTypeEnum,
    public text: string,
    public highlight: string,
    public description: string) {
  }

  public isAddress(): boolean { return this.type === LoqateTypeEnum.ADDRESS; }
  public display(): string { return this.text + ', ' + this.description; }
}

现在我想，LoqateResponseModels 的列表被存储为search 的结果，然后这些列表项中的每一个都被正确格式化以通过resultFormatter 显示在预先输入的弹出窗口中。

tldr：我想使用 ngbTypeahead 搜索某些内容并从 API 端点查询搜索词，并在 typeahead 弹出窗口中显示搜索结果。

编辑：我已经编辑了答案，这段代码正在运行。

Answer 1

我认为您正在寻找switchMap。该运算符将为您订阅一个可观察的源并发出其结果：

您不想return null，您只需返回带有管道修改的可观察对象。

您的操作符函数应该接受一个可观察对象并返回一个可观察对象。您的 observable 可以简单地使用 switchMap 将传入的 text 映射到 api 调用。

search: OperatorFunction<string, readonly LoqateResponseModel[]> = text$ => 
    text$.pipe(
        switchMap(text => this.searchAddress(text))
    );

每次switchMap 收到一些text，它都会为你做一些事情：

1. 订阅searchAddress(text)
2. 从此订阅发出结果
3. 停止发送以前订阅的结果