Angular NG-AUTOCOMPLETE如何从对象数组中加载数据

Question

很抱歉，如果标题不是很好的自我解释，实际上我遵循了 Angular-ng-autocomplete 它可以很好地运行，我可以加载国家/地区的数据，并且可以轻松地制定自动完成功能。但是，在我的原始项目代码中，我定义了一系列对象，如下所示，

assetDataDictionary: Array<DataDictionaryEntry> = [];

datadictionaryEntry 具有以下声明，

export interface DataDictionaryEntry {
    id: string,
    text: string
}

edit：datadictionaryEntry

在我键入时 从数据库中获取值在 [data] =“ AssetDatadictionary” 内部ng-autocomplete内部，我什么都没有。我一直在选择标签中使用以下代码来填充下拉列表，并且它效果很好，

<select id="assetId" name="id" class="form-control" [(ngModel)]="selectedAsset" (change)="getAssetValue()">
     <option *ngFor="let asset of assetDataDictionary" value="{{asset.id}}-{{asset.text}}">{{asset.text}}</option>
</select>

所以我该如何替换让AssetDatectionary的资产与一起工作ng-autocomplete

希望我的问题有意义，有人能够帮助我。

谢谢你的宝贵时间。

Answer 1

看来唯一的问题是您的数据具有文本字段，而不是name字段，例如自动完成组件的示例。

因此，您只需要进行几个更改。

首先，该组件接受searchKeyword输入：

<ng-autocomplete
  [data]="countries"
  [searchKeyword]="keyword" <---------
>
</ng-autocomplete>

这是它用于过滤数据的属性名称。

在示例中，它设置为name，因此您需要将组件类的关键字属性设置为text> text而不是：

export class YourAwesomeComponent {
  keyword = 'text'; // <--- ng-autocomplete's searchKeyword
}

然后您需要更新#itemtemplate因此，它显示您的text属性而不是示例的name属性：

<ng-template #itemTemplate let-item>
  <a [innerHTML]="item.text"></a> <--- change this from item.name to item.text
</ng-template>

在这里显示它是一个stackblitz 更改。