ngbTypeahead输入，类型为

如何解决ngbTypeahead输入，类型为

我有一个stackblitz和一个ngbTypeahead输入的地址。键入时，它将字符串发送到ArcGIS API，并提供建议列表以填充前面的下拉列表。

这与get一起使用，但是现在我正在使用get ，因为我被告知返回一个类型是一种更好的做法。

我已将服务修改为：

@Injectable()
export class SuggestService {
  constructor(private http: HttpClient) {}

  search(term: string): Observable<Array<LocationSuggestion>> {
    if (term === "") {
      return of([]);
    }

    return this.http
      .get<Array<LocationSuggestion>>(GIS_URL,{ params: GIS_PARAMS.set("text",term) });
  }
}

从API返回的示例：

    {
 "suggestions": [
  {
   "text": "Treasure Island,3300 Las Vegas Blvd S,Las Vegas,NV,89109,USA","magicKey": "dHA9MCNsb2M9MTYzNTU4NCNsbmc9MzMjcGw9ODQ1MzAwI2xicz0xNDozNTUwMTU1NA==","isCollection": false
  },{
   "text": "Treasure Island-Las Vegas,"magicKey": "dHA9MCNsb2M9MTYzNTU4NCNsbmc9MzMjcGw9ODQ1NDkyI2xicz0xNDozNTUwMTYzMg==",{
   "text": "Treasure Island Parking,Mel Torme Way,"magicKey": "dHA9MCNsb2M9MTYzNTU5MyNsbmc9MzMjcGw9ODQ1NjQ3I2xicz0xNDozNTUwMTYxMw==",{
   "text": "Treasure Island,"magicKey": "dHA9MCNsb2M9MTYzNTU1MSNsbmc9MzMjcGw9ODQ0NTg2I2xicz0xNDozNTUwMTU1NA==",Industrial Rd,"magicKey": "dHA9MCNsb2M9MTYzNTU1MiNsbmc9MzMjcGw9ODQ0NTk4I2xicz0xNDozNTUwMTYxMw==","isCollection": false
  }
 ]
}

但是我不理解对服务的实际调用：

NgbTyepaheadHttp类

 formatter = (result: any) => result.text as string;

  search = (text$: Observable<string>) => // Is text$ a observable received from input?
    text$.pipe(                           // Self explanatory
      debounceTime(300),distinctUntilChanged(),tap(() => (this.searching = true)),// Sends message to UI searching?
      switchMap(term =>                   // What does Switch Map do?
        this._service.search(term).pipe(
          tap(() => (this.searchFailed = false)),catchError(() => {
            this.searchFailed = true;
            return of([]);
          })
        )
      ),tap(() => (this.searching = false))
    );

我希望格式化程序也需要一种类型，但是当我将result:any更改为result:LocationSuggestion时，结果是否不存在？

在我可以修改对服务的调用以使其与特定类型一起使用之前-我需要更好地理解上述代码块。由于所有嵌套，很难理解。

问：哪一行实际上返回搜索结果，因为唯一的return语句似乎是针对空数组的？

由于控制台中的此错误，我不认为提前输入了LocationSuggestions数组：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

解决方法

对api的调用返回一个包含数组而不是数组的对象。

将api调用更改为

return this.http
      .get<GisLocationSuggestions>(GIS_URL,{ params: GIS_PARAMS.set("text",term) })
      .pipe(map(val => val.suggestions));

修复了https://stackblitz.com/edit/angular-d5zmgq-r6vzye?file=src%2Fapp%2Ftypeahead-http.ts