Angular2 içinde bir nesne dizisi üzerinde select/option/NgFor nasıl kullanılır

Question

Dizeler yerine bir dizi nesne tarafından desteklenen Angular2'de bir seçim oluşturmada sorun yaşıyorum. AngularJS'de ngOptions kullanarak nasıl yapılacağını biliyordum, ancak Angular2'de çalışmıyor gibi görünüyor (alpha 42 kullanıyorum). Aşağıdaki örnekte dört seçimim var, ancak bunlardan sadece ikisi çalışıyor.

1. 'Select String' basit bir dize tabanlı seçimdir ve iyi çalışır.
2. '2 yollu bağlama yoluyla nesne seç', 2 yönlü bağlamayı kullanma girişimdi. Ne yazık ki, iki şekilde başarısız olur - sayfa yüklendiğinde, seçim yanlış değeri gösterir (çubuk yerine foo) ve listede bir seçenek belirlediğimde, '[Nesne Nesnesi]' değeri destek deposuna gönderilir doğru değer yerine.
3. 'Nesneyi nesne ile seç', seçili değeri $ olayından alma girişimdi. İki şekilde de başarısız oluyor - ilk yük yanlış şekilde # 2 ile aynıdır ve listedeki bir seçeneği işaretlediğimde, [Nesne Nesnesi] değeri etkinlikten alınır, bu yüzden Doğru değeri al. Seçim temizlenir.
4. 'Nesne ile nesne seç', çalışan bir nesne kullanan tek yaklaşımdır. Maalesef, # 1'den dize dizisini kullanarak ve değeri diziden nesneyle ve geri dönüştürerek çalışır.

İstenilen yol buysa 4 yapabilirim, ancak oldukça tıkanık görünüyor. Başka bir yaklaşım var mı? Ben alfada çok erken miyim? Aptalca bir şey mi yaptım?

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2'; 

interface TestObject { 
    name:string; 
    value:number; 
} 

@Component({ 
    selector: 'app', 
    template: ` 
    <h4>Select String</h4> 
    <select [(ng-model)]="strValue"> 
     <option *ng-for="#o of strArray" [value]="o">{{o}}</option> 
    </select> 

    <h4>Select Object via 2-way binding</h4> 
    <select [(ng-model)]="objValue1"> 
     <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option> 
    </select> 

    <h4>Select Object via event</h4> 
    <select [ng-model]="objValue2" (change)="updateObjValue2($event)"> 
     <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option> 
    </select> 

    <h4>Select Object via string</h4> 
    <select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> 
     <option *ng-for="#o of strArray" [value]="o">{{o}}</option> 
    </select> 

    <div><button (click)="printValues()">Print Values</button></div> 

    `, 
    directives: [FORM_DIRECTIVES, NgFor] 
}) 
export class AppComponent { 
    objArray:TestObject[] = [{name: 'foo', value: 1}, {name: 'bar', value: 1}]; 
    objValue1:TestObject = this.objArray[1]; 
    objValue2:TestObject = this.objArray[1]; 
    objValue3:TestObject = this.objArray[1]; 

    strArray:string[] = this.objArray.map((obj:TestObject) => obj.name); 
    strValue:string = this.strArray[1]; 

    updateObjValue2(event:Event):void { 
    const value:string = (<HTMLSelectElement>event.srcElement).value; 

    this.objValue2 = this.objArray.find((obj:TestObject) => obj.name === value); 
    } 

    updateObjValue3(event:Event):void { 
    const value:string = (<HTMLSelectElement>event.srcElement).value; 

    this.objValue3 = this.objArray.find((obj:TestObject) => obj.name === value); 
    } 

    printValues():void { 
    console.log('strValue', this.strValue); 
    console.log('objValue1', this.objValue1); 
    console.log('objValue2', this.objValue2); 
    console.log('objValue3', this.objValue3); 
    } 
} 

Answer 1

Ben DOM veya Javascript/typescript ile hiçbir uzman değilim ama DOM-Etiketler nasılsa gerçek javascript nesne işleyemez düşünüyorum. Ben alfa nasıl olduğunu şeyler bilmiyorum

interface TestObject { 
    name:string; 
    value:number; 
} 

@Component({ 
    selector: 'app', 
    template: ` 
     <h4>Select Object via 2-way binding</h4> 

     <select [ngModel]="selectedObject | json" (ngModelChange)="updateSelectedValue($event)"> 
     <option *ngFor="#o of objArray" [value]="o | json" >{{o.name}}</option> 
     </select> 

     <h4>You selected:</h4> {{selectedObject }} 
    `, 
    directives: [FORM_DIRECTIVES] 
}) 
export class App { 
    objArray:TestObject[]; 
    selectedObject:TestObject; 
    constructor(){ 
    this.objArray = [{name: 'foo', value: 1}, {name: 'bar', value: 1}]; 
    this.selectedObject = this.objArray[1]; 
    } 
    updateSelectedValue(event:string): void{ 
    this.selectedObject = JSON.parse(event); 
    } 
} 

Answer 2

ama 12 hakkı beta kullanıyorum: Ama bir dize olarak tüm nesneye koyarak ve bir nesne geri ayrıştırma/JSON benim için çalıştı şimdi ve bu iyi çalışıyor. Eğer nesneler dizisi varsa, böyle bir seçme oluşturun:

<select [(ngModel)]="simpleValue"> // value is a string or number 
    <option *ngFor="#obj of objArray" [value]="obj.value">{{obj.name}}</option> 
</select> 

gerçek nesne üzerinde eşleştirmek istiyorsanız, böyle yapardım:

<select [(ngModel)]="objValue"> // value is an object 
    <option *ngFor="#obj of objArray" [ngValue]="obj">{{obj.name}}</option> 
</select>