Angular ngbTypeahead 给出 [Object] 错误

Question

我的 component.html（输入字段）

<input type="text" class="form-control" [(ngModel)]="searchQuery" [ngbTypeahead]="recommends"
    name="searchQuery" typeaheadOptionField="username">

我的组件.ts

  this.recommends = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap((searchText) => this.stats.getSearchCompletion(searchText))
      );
}

我的 getSearchCompletion 函数

  getSearchCompletion(searchQuery) {
   if(searchQuery) return this.http.post(backendURL + '/my/route', { searchQuery: searchQuery }, { headers: this.headers }).pipe(map(res => res.json()));
}

repsonse 以如下格式返回：

[{
 "username": "test"

},
{
 "username": "test2"
}]

我收到以下错误： To Image

我猜这是因为我的服务器响应在一个列表中有多个对象。但是如何将 ngbTypeahead 绑定到例如用户名？我试过typeaheadOptionField="username"，这给了我错误。列表弹出，但没有条目。

Answer 1

您可以使用一些 javascript 技巧将响应转换为纯字符串数组，如下所示

   if(searchQuery) return this.http.post(backendURL + '/my/route', { searchQuery: searchQuery }, { headers: this.headers }).pipe(map(res => {
   let arr:string[] = [];
   res.json().forEach(x=>{
       arr.push(x['username']);
   });

    return arr;

   }));

这是基于您的 api 响应采用这种格式的假设

[{ "username": "test"},{ "username": "test2"}]

这是一个对象数组。

谢谢。