Eigenschaft Bindung an das Objekt funktioniert nicht in Angular 2

Question

Ich habe das sehr seltsame Verhalten mit Angular 2 Eigenschaft Bindung. Zum einen

, ist dies ein Shop Klasse:

export class Store { 
    id: number; 
    name: string; 
    address: string; 
} 

Diese Komponente Code ist:

export class MyBuggyComponent implements OnInit { 

    stores: Store[]; 
    selectedStore: any; 
    error: any; 

    constructor(private myDataService: MyDataService) { } 

    ngOnInit() { 
    this.myDataService.getStores().subscribe(
     stores => this.stores = stores, 
     error => { this.error = error; console.log(this.error); }); 
    } 

    selectionChanged(value: any){ 
    console.log("DEBUG: " + value); 
    } 
} 

Und hier ist die Vorlage, die mich verrückt treibt!

<form> 
    <div class="form-group"> 
    <label for="store">Select store:</label> 
    <select class="form-control custom-select" id="store" name="store" required 
     [(ngModel)]="selectedStore" (change)="selectionChanged($event.target.value)"> 
     <option *ngFor="let s of stores" [value]="s">{{s.name}}</option> 
    </select> 
    <small class="form-text text-muted" *ngIf="selectedStore">Address: {{selectedStore.address}}</small> 
    </div> 
</form> 

Hier die Bindung [value]="s" des option von <select> Tag funktioniert einfach nicht! Es setzt selectedStore auf ein leeres Objekt (?), Es zeigt leeres Address: Text in <small> Tag, und es protokolliert: DEBUG: [object Object] in der Konsole (in selectionChanged()). Aber die {{s.name}} Interpolation funktioniert wie erwartet (zeigt Namen innerhalb der Auswahlbox an).

Nun ist diese beobachten: Wenn ich auf die Vorlage folgende Änderung vornehmen, es funktioniert wie erwartet:

<option *ngFor="let s of stores" [value]="s.address">{{s.name}}</option> 
</select> 
<small class="form-text text-muted" *ngIf="selectedStore">Address: {{selectedStore}}</small> 

nun die Bindearbeiten, wird die Adresse in der Konsole angemeldet und auch in <small> Tag richtig angezeigt. Also die Bindung [value]="s" funktioniert nicht (tatsächlich gibt einige seltsame 'Objekt' Wert), aber verbindlich [value]="s.address" funktioniert wie erwartet. Ich habe die Dokumente verfolgt und es gibt keine Erwähnung solcher Einschränkungen. Ist das ein Fehler? Oder fehlt mir etwas?

Answer 1

[value] unterstützt nur String-Vales als gebundenen Wert. Verwenden Sie stattdessen [ngValue], um Objekte zu binden.

Answer 2

i gleiche Problem haben, können Sie meine Lösung versuchen:

<select class="form-control custom-select" id="store" name="store" required 
    [(ngModel)]="selectedStore" (change)="selectionChanged($event.target.value)"> 
    <option *ngFor="let s of stores; let i = index" value="{{i}}">{{s.name}}</option> 
</select> 

// .ts 
selectionChanged(value: any){ 
    // this.selectedStore = position in stores 
    console.log(this.stores[this.selectedStore]); 
}