Angular 2 Wählen Sie mit Standard von separatem Modell verwenden

Question

Ich finde keine Möglichkeit zum Festlegen der Standard oder Verknüpfung mit einem anderen Modell bei der Verwendung von.über ein anderes Modell?

Das Modell, das ich zu binden bin versucht, ist dies:

"Bookings": {"dates": 
[{"date":"3-10-2016","slot":"Full"}, 
{"date":"4-10-2016","slot":"Full"}, 
{"date":"5-10-2016","slot":"Afternoon"}, 
{"date":"6-10-2016","slot":"Morning"}]} 

ich für die Optionen ein anderes Modell haben:

lengthsObj = [ 
{slot:'Full'}, 
{slot:'Morning'}, 
{slot:'Afternoon'} 
]; 

ich jede mögliche Kombination ausprobiert habe (mit dem Modell und Wert) ich denke an mit diesem können:

<div *ngFor="let date of booking.dates"> 
<select *ngIf="true" name="days" [(ngModel)]="date.slot" required> 
    <option *ngFor="let length of lengthsObj" [value]="date.slot"> 
     {{length.slot}} 
    </option> 
    </select> 
</div> 

Aber ich bin nicht einen Link zu dem Modell oder jede Standardwerte zu bekommen.

Here's a plunker

Answer 1

Sie einen Fehler gemacht, indem Daten date.slot-ngValue zuweisen. Ändern Sie einfach ngValue zu length.slot in Ihrem Plunker und es wird funktionieren perfekt:

<select name="days" [(ngModel)]="date.slot" required> 
    <option *ngFor="let length of lengthsObj" [ngValue]="length.slot"> 
     {{length.slot}} 
    </option> 
</select> 

Answer 2

Sie haben length.slot für option Wert zu verwenden, wie unten: prüfen plnkr

<div *ngFor="let date of booking.dates"> 
    <select *ngIf="true" name="days" [(ngModel)]="date.slot" required> 
    <option *ngFor="let length of lengthsObj" [value]="length.slot"> 
     {{length.slot}} 
    </option> 
    </select> 
</div>