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

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

我想使用 'complex' 数据（意味着要查询的对象而不是简单的字符串）进行预输入，并在自定义模板中显示它们。问题是，结果列表中显示的值不正确。例如，如果我在自定义 complex 预先输入中键入 'a'，则不会显示任何内容。如果我在 simple 自定义预输入中键入 'a'，则会显示结果 'Alabama'、'Arizona'.. 包含 [=29= 的所有内容] 我想要自定义 complex typeahead.

相同的结果

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

Answer 1

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

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

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

Plunker Example

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

Angular 2 - Ng2-Bootstrap: custom complex template typeahead implementation

typeahead

ng2-bootstrap

angular