Immer Objekt-Eigenschaften über ngModel select-Liste in Eckige 2?

Ich habe ein problem, das Holen der Eigenschaften von einem Objekt, das ausgewählt wurde aus einer select-Liste in Eckige 2 (RC1). Nehmen Sie die folgende syntax:

<select required [(ngModel)]="model.plan">
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [value]="plan">{{ plan.name }}</option>
</select>

Wo plans ist definiert als ein array von Objekten:

[{ name: 'Plan 1' }, { name: 'Plan 2' }]

Wenn Sie versuchen, und geben Sie den Wert ein der Tasten des ausgewählten Objekts wird nichts angezeigt:

<p>{{ model.plan?.name }}</p> //Shows nothing if a plan is selected

Hier ist ein fork von der Angular2 form einer live-demo, zeigen dieses problem. Wählen Sie "Plan 2" wählen Sie aus der Liste, und sehen, dass nichts angezeigt wird.

Was ist denn hier Los?

InformationsquelleAutor ReactingToAngularVues | 2016-06-07
  1. 21

    Objekte als Wert verwenden [ngValue] statt [value]. [value] unterstützt nur die string-ids.

    <select required [(ngModel)]="model"> <!-- <== changed -->
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [ngValue]="plan">{{ plan.name }}</option>
</select>

    Plunker Beispiel

    model muss auf eines der Elemente in plans arbeiten als Standardwert (es muss sich um dieselbe Instanz sein, die nicht einer anderen Instanz, welche die gleichen Werte).

    InformationsquelleAutor Günter Zöchbauer
  2. 0

    Soweit ich sehen kann, es gibt noch ein Problem mit zwei-Wege-Bindung zu einer select. Also versuchen Sie dies:

    Vorlage

    <select required [(ngModel)]="model.plan" (change)="setPlan($event.target.value)">
    <option selected="selected" disabled>Plan...</option>
    <option *ngFor="#plan of plans" [value]="plan.name">{{ plan.name }}</option>
</select>

    Komponente Klasse

    setPlan(value) {
    //if you're on older versions of ES, use for-in instead
    var plan = this.plans.find(p => p.name = value);

    if(plan) { this.model.plan = plan; }
}

    Konnte nicht probieren Sie es aus irgendeinem Grund plunkr hat nie für mich gearbeitet.

    InformationsquelleAutor RoninCoder
Schreibe einen Kommentar