javascript - Angular HttpClient - 访问隐藏在响应数据中的值

Question

我正在访问在线 API，并希望使用文本值来填充 ngb-typeahead 下拉列表。有一个working example在使用 Wikipedia 的 Angular Bootstrap 网站上，但从 Wikipedia API 返回的数据与我从地理编码 API 获取的数据不同。我得到的数据以这种格式返回:

{
 "suggestions": [
  {
   "text": "23 Queen Charlotte Drive, Aotea, Porirua, Wellington, 5024, NZL",
   "magicKey": "dHA9MCNsb2M9NDMwNzcyNzQjbG5nPTMzI2huPTIzI2xicz0xMDk6NDg1NDQwMzU=",
   "isCollection": false
  },
  {
   "text": "23 Queen Mary Avenue, Epsom, Auckland, 1023, NZL",
   "magicKey": "dHA9MCNsb2M9NDMwNDY4MjUjbG5nPTMzI2ZhPTE0NDE3OTIjaG49MjMjbGJzPTEwOTo0ODU0NDMyNA==",
   "isCollection": false
  },

我一直在尝试使用以下内容访问响应数据中的text:

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

我还阅读了 Angular 教程 here处理响应数据，但示例中的区别在于，他们获取的是 Hero 数组，而我获取的是包含建议数组的对象。

预输入看起来像:

HTML

<fieldset class="form-inline">
  <div class="form-group">
    <label for="typeahead-http">Search for a wiki page:</label>
    <input id="typeahead-http" type="text" class="form-control mx-sm-3" [class.is-invalid]="searchFailed" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Wikipedia search" />
    <small *ngIf="searching" class="form-text text-muted">searching...</small>
    <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
  </div>
</fieldset>
<hr>
<pre>Model: {{ model | json }}</pre>

StackBlitz 上的完整代码是 here .

我是 Angular 的新手，所以详细的答案会很好。

Answer 1

您需要在预输入input 上指定resultFormatter 和inputFormatter(请参阅 Typeahead )。

说明

服务中的 search 方法返回建议对象列表，每个对象如下所示:

{
  isCollection: ...
  magicKey: ...
  text: ...
}

但是，默认情况下，预输入控件需要一个字符串列表，因此它将您的对象显示为 [Object object]。

您需要告诉 typeahead 控件如何从您的对象确定字符串值，您可以通过 resultFormatter 和 inputFormatter 来完成此操作。

这些输入采用一个函数，该函数将对象作为输入，将字符串显示值作为其输出。

下面的

formatter 就是该函数，列表中显示的每个项目都会调用它。如果将其扩展为普通函数，则可以在其中放置一个断点并看到它以这种方式被调用。

解决方案

<input id="typeahead-http" ... [inputFormatter]="formatter" [resultFormatter]="formatter"/>

TypeScript 文件:

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

更新了 StackBlitz

https://stackblitz.com/edit/so-typeahead?file=src%2Fapp%2Ftypeahead-http.ts

后续问题

格式化程序中的

1. item:

   考虑:

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

   是缩写:

    function format(item: any){
      return item.text as string;
    }
   

   他们预先输入控制/指令迭代 search(..) 返回的项目，并调用每个项目的此方法。结果显示在选择列表中。

2. map(response => response.suggestions)

   来自服务的响应是一个如下对象:

    {  // object
      suggestions:
        [
          { ..., text: 'Place 1' },
          { ..., text: 'Place 2' }
        ]
    }
   

   这是一个包含名为suggestions 的列表的对象。 typeahead 仅需要一个列表，因此 map 只转换包含 list => list 的对象。

3. 您定义的格式化程序是否同时执行输入和结果？

   是的，因为它已分配给模板中的 [inputFormatter] 和 [resultFormatter]。