angular - 使用 PrimeNG 自动完成建议框显示多个对象属性

Question

我正在使用 PrimeNG 自动完成功能来创建下拉建议框。我希望它显示像 StubHub 这样的对象的多个属性（参见下面的图像示例）。

我的 html 中有这个：

<p-autoComplete
    id="autocomplete"
    [(ngModel)]="term"
    [minLength]=1
    [suggestions]="suggestedData"
    (completeMethod)="search($event)"
    field="description"
    placeholder="Search by ticker or symbol..."
    (onSelect)="goToDataDetail($event)"
    (onClear)="clearInput()">
</p-autoComplete>

现在，因为这样做需要多次 api 调用，所以我有一种相当复杂（读取速度慢）的方式来获取建议的项目。在搜索时，我进行了两个 api 调用，使用 将它们组合起来forkJoin，必须将返回对象转换为数组，以便我可以轻松地循环它们，然后向返回对象添加其他属性（因为 API 不能完全返回我需要的内容） ，我正在尝试将 html 注入“描述”字段，因为这是建议下拉列表显示的内容，但下拉列表不解释 html，它只是呈现"<div class..."任何建议的原始字符串？

 search(event) {
    forkJoin({
      gfdRequest: this.gfdService.getStatusByTicker('GFD', event.query),
      iceRequest: this.gfdService.getStatusByTicker('ICE', event.query)
    }).subscribe((result: any) => {
      // convert return obj to array to loop through them
      var gfdData:any[] = Object.values(result.gfdRequest);
      var iceData:any[] = Object.values(result.iceRequest);

      var dataToSuggest: any[] = [];

      gfdData.forEach(element => {
        if (element.description != null) {
          element.tenant = 'GFD';
          element.description = 
          `<div class="d-flex w-100 justify-content-around'>
            <div class="d-inline">${element.ticker}</div>
            <div class="d-inline">${element.description}</div>
            <div class="d-inline">Exchange: ${element.exchange}</div>
          </div>`;
          // element.ticker + ' - ' + element.description + ' - Exchange: ' + element.exchange;
          dataToSuggest.push(element);
        }
      });

      iceData.forEach(element => {
        if (element.description != null) {
          element.tenant = 'ICE';
          element.description = element.ticker + ' - ' + element.description + ' - - Exchange: ' + element.exchange;
          dataToSuggest.push(element);
        }
      });


      this.suggestedData = dataToSuggest;
      console.log(this.suggestedData)
    })
  }

标签： angulartypescriptautocompleteprimeng