Angular 2 - Ng2-Bootstrap: benutzerdefinierte komplexe Template-Typ-Ahead-Implementierung

Question

Ich habe ein Problem mit der Implementierung von ng2-bootrstrap typeahead. Ich habe einen Plünderer geschaffen, um das Problem zu zeigen.

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

Ich will ‚Komplex‘ Daten verwenden (bedeutet Objekte nicht einfache Strings abfragen) für die typeahead und zeigen sie in einer benutzerdefinierten Vorlage. Das Problem ist, dass die in der Ergebnisliste angezeigten Werte nicht korrekt sind. Zum Beispiel, wenn ich 'a' in der Typehead auf dem benutzerdefinierten komplexen typeahead nichts auftaucht. Wenn ich "a" in die einfache benutzerdefinierte typahead gebe, zeigen sich die Resultate "Alabama", "Arizona". Alles, das ein "a" einschließt und ich wünsche das gleiche Resultat für den kundenspezifischen komplizierten typehead.

Ist es ein Fehler in der ng2-Bootstrap oder fehlt mir etwas?

Answer 1

Ich habe Ihr Problem untersucht und es scheint, dass Ihre Lösung sehr einfach aussieht.

Fügen Sie einfach typeaheadOptionField Eigenschaft auf Ihre komplexe Komponente

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

Plunker Example