Question

我的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">

我想为typeahead使用'复杂'数据（意味着对象不是简单的字符串），并在自定义模板中显示它们。问题是，结果列表中显示的值不正确。例如，如果我在自定义复杂类型的前额中输入'a'，则无法显示任何内容。如果我在简单自定义输入中键入'a'，则会显示结果'Alabama'，'Arizona'..包含'a'的所有内容，我想要自定义相同的结果复杂打字。

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

Answer 1

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

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

即可

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

<强> Plunker Example

Angular 2 - Ng2-Bootstrap：自定义复杂模板typeahead实现

1 个答案: