Angular 2 - Ng2-Bootstrap：自定义复杂模板预输入实现答案

【问题标题】：Angular 2 - Ng2-Bootstrap: custom complex template typeahead implementationAngular 2 - Ng2-Bootstrap：自定义复杂模板预输入实现
【发布时间】：2017-02-23 14:14:58
【问题描述】：

我对 ng2-bootrstrap typeahead 实现有疑问。我创建了一个 plunker 来显示这个问题。

https://plnkr.co/edit/SDgkXLA2RWIjGTjJ02E6?p=preview

<template #customItemTemplate let-model="item" let-index="index">
    <h5>This is: {{model | json}} Index: {{ index }}</h5>
</template>

<input [(ngModel)]="customSelected"
    [typeahead]="statesComplex"
    [typeaheadItemTemplate]="customItemTemplateComplex">

<input [(ngModel)]="selected"
    [typeahead]="states"
    [typeaheadItemTemplate]="customItemTemplate">

我想使用“复杂”数据（表示查询不是简单字符串的对象）作为预输入并将它们显示在自定义模板中。问题是，结果列表中显示的值不正确。例如，如果我在自定义 complex 预输入的预输入中键入“a”，则不会显示任何内容。如果我在 simple 自定义预输入中键入“a”，则会显示结果“Alabama”、“Arizona”.. 包含“a”的所有内容，我希望自定义的结果相同 complex 提前输入。

是 ng2-bootstrap 中的错误还是我遗漏了什么？

【问题讨论】：

请注意您的标签； AngularJS 与 Angular2 问题无关。

标签： angular typeahead ng2-bootstrap

【解决方案1】：

我调查了您的问题，您的解决方案看起来非常简单。

只需将typeaheadOptionField 属性添加到您的复杂组件中

<input [(ngModel)]="customSelected"
       [typeahead]="statesComplex"
       [typeaheadItemTemplate]="customItemTemplateComplex"
       typeaheadOptionField="name">

Plunker Example

【讨论】：