带有类型的 ngbTypeahead 输入答案

【问题标题】：ngbTypeahead input with Type带有类型的 ngbTypeahead 输入
【发布时间】：2020-12-17 19:16:04
【问题描述】：

我有一个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, 3300 Las Vegas Blvd S, Las Vegas, NV, 89109, USA",
   "magicKey": "dHA9MCNsb2M9MTYzNTU4NCNsbmc9MzMjcGw9ODQ1NDkyI2xicz0xNDozNTUwMTYzMg==",
   "isCollection": false
  },
  {
   "text": "Treasure Island Parking, Mel Torme Way, Las Vegas, NV, 89109, USA",
   "magicKey": "dHA9MCNsb2M9MTYzNTU5MyNsbmc9MzMjcGw9ODQ1NjQ3I2xicz0xNDozNTUwMTYxMw==",
   "isCollection": false
  },
  {
   "text": "Treasure Island, Las Vegas, NV, 89109, USA",
   "magicKey": "dHA9MCNsb2M9MTYzNTU1MSNsbmc9MzMjcGw9ODQ0NTg2I2xicz0xNDozNTUwMTU1NA==",
   "isCollection": false
  },
  {
   "text": "Treasure Island Parking, Industrial Rd, Las Vegas, NV, 89109, USA",
   "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 时，result.text 不存在？

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

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

由于控制台中出现此错误，我认为预输入不会得到 LocationSuggestions 的数组：

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

【问题讨论】：

标签： javascript angular ng-bootstrap

【解决方案1】：

对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

【讨论】：