Ich habe viele ähnliche existierende Antworten auf SO und anderswo recherchiert, aber ich kann einfach keine Lösung dafür finden.
Ich verwende den modellgesteuerten Ansatz in Angular 2, um mein Formular zu erstellen, das sowohl ein Formular zum Hinzufügen als auch Bearbeiten ist. Im Bearbeitungsmodus werden die Werte mit Daten gefüllt, die von einem Service abgerufen wurden: Dieser Aspekt ist in Ordnung, da die einfachen Texteingaben alle korrekt binden.
Eine der Eigenschaften ist 'Land' und dies ist ein Objekt wie folgt:
%Vor%Ich möchte dies an ein Select-Steuerelement binden, das die Liste der verfügbaren Länder enthält, und das aus dem Modell, das beim Laden des Formulars ausgefüllt wird. Ich möchte, dass der Wert der Bindung das Länderobjekt ist, nicht nur die ID.
Hier ist der HTML-Code des Auswahlsteuerelements:
%Vor%Und hier versuche ich, den Wert aus der Komponentenklasse aufzufüllen:
%Vor%Es gibt jedoch keine ausgewählte Option, wenn die Seite geladen wird, obwohl die Konsole bestätigt, dass this.person.country vorhanden ist und das richtige Objekt enthält.
Ich kann es mit IDs arbeiten: in der Ansicht zu [Wert]="c.id" ändern und .id in der Klasse anhängen, und dann funktioniert es, dass die richtige Option ausgewählt ist. Das Problem ist, dass die Auswahl kein Objekt mehr für die Land-Eigenschaft ausgibt, sondern nur die ID. Ich habe versucht, [Wert] zu [ngValue] zu ändern und das gleiche Ergebnis zu erhalten. Ich habe sogar [ngModel]="country" zum select Element hinzugefügt und das hat auch nicht geholfen.
Ich wäre dankbar für jede Hilfe.
Das Problem ist höchstwahrscheinlich, dass this.person.country nicht das gleiche country wie in Ihrem countries -Array ist.
Wenn wir sie gleich machen wollen, können wir entweder explizit das valueChanges des ausgewählten Steuerelements abonnieren oder [(ngModel)] an person.country binden:
Änderungen abonnieren
Code
%Vor%Vorlage
ngModel bind
Wir müssen die Objekte immer noch anpassen (vergleiche die Strategie, die Angular 2 benutzt, was JS wirklich benutzt)
Code
%Vor%Vorlage
%Vor%ngModel Plunker: Ссылка
Abonnement Plunker : Ссылка