Wie kann ich mit typeahead Objekte holen/präsentieren, aber aufnehmen und mit Strings antworten?

Question

Das Element ng-bootstrap typeahead ermöglicht das Abrufen eines Arrays von Objektvorschlägen und die Auswahl eines solchen, sodass das Modell zum ausgewählten Objekt wird.

The full code can be seen in this Plunkr. Testen Sie es, indem Sie nach einem US-Bundesstaat suchen und dann den model-Ausgang beobachten. Hier

ist die Vorlage:

<label for="typeahead-template">Search for a state:</label> 
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" 
    [inputFormatter]="formatter" /> 
<hr> 
<pre>Model: {{ model | json }}</pre> 

Wenn Sie für "Alabama" suchen das Modell nicht Alabama werden, sondern

{ 
    "name": "Alabama", 
    "flag": "5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png" 
} 

In meiner Situation, würde Ich mag das Modell erhalten als Alabama. Ich möchte das Bild und andere Daten nicht in meinem Formular an den Server senden.

Ich habe versucht, das (selectItem) Ereignis von ng-Bootstrap zur Verfügung gestellt, und den Wert manuell darin ändern, aber das funktioniert nicht. Das Modell bleibt gleich - ein Objekt und keine Schnur !.

heißt

selectItem(e: NgbTypeaheadSelectItemEvent, fubi: any){ 
    console.log("e.item.name", e.item.name); 
    this.addressForm.patchValue({ 
     statename: e.item.name 
    }); 
    } 

statename Unterkunft Meine Form ist nicht aktualisiert, wenn auf diese Weise genannt

Irgendwelche Ideen, warum nicht? Ich habe alle offensichtlichen versucht, glaube ich

Answer 1

Es sieht aus wie Sie auf der richtigen Spur mit dem Ereignis selectItem sind. Vielleicht hast du die Syntax nicht richtig verstanden?

In der Eingabe definitionem Sie wollen wahrscheinlich zu:

1. die Referenz ngModel entfernen
2. es mit einer Referenz ersetzen Sie die Funktion ausgeführt werden sollen, wenn das selectItem Ereignis (diese Funktion kann ausgelöst wird eingestellt "Modell" entsprechend ... oder "state" vielleicht ... was auch immer Ihr Boot schwimmt)

wie so:

<input id="typeahead-template" 
     type="text" 
     class="form-control" 
     (selectItem)="setModel($event)" 
     [ngbTypeahead]="search" 
     [resultTemplate]="rt" 
     [inputFormatter]="formatter" /> 

und dann in Ihrer typeahead-template.ts-Datei die Funktion:

setModel(e: NgbTypeaheadSelectItemEvent, fubi: any) { 
    this.model = e.item.name; 
} 

ich forked your Plunkr mit dieser Mods, und es setzt den „Modell“ Wert auf „Alabama“ wie gewünscht ... können Sie wahrscheinlich nimm es von dort, um zu tun, was immer du tun musst. Ich hoffe, das hilft!