Angular2 ausgewählte Option mit Objekten

Question

Ich habe eine Angular 2 App, die mit Kunden und einer Federauflage Back-End beschäftigt. Das Kundenobjekt hat einen Kundentyp, der auch ein Objekt ist, und ich habe die Dropdown-Liste auf dem Kundenformular arbeiten, so dass Objekte als Wert gespeichert werden, aber ich kann nicht herausfinden, wie Sie den richtigen Kundentyp auswählen, wenn ein Der vorhandene Kunde wird in das Formular geladen.

<select class="form-control" required [(ngModel)]="customer.customerType" > 
    <option *ngFor="let ct of customerTypes" [ngValue]="ct">{{ct.customerType}}</option> 
</select> 

In dem obigen Code-Schnipsel, wenn der Kunde bereits einen Kundentyp hat, dann wird der Drop-Down keinen Wert aus. Ich erinnere mich an das gleiche Problem mit angular1, die mit ngOptions gelöst wurde:

<select ng-model="customer.customerType" 
     ng-options="customerType.customerType for customerType in customerTypes 
     track by customerType.customerType" > 
</select> 

Also, meine Frage ist, wie die Art und Weise Angular1 dieses Problem in Angular 2

Answer 1

ich die etwas klobig Ansatz zu ersetzen, die Instanz von Customer genommen haben, die in meinem Customer-Objekt zurückgegeben wird, mit dem in der Customer Array gehalten. Dies kann nur einmal durchgeführt werden, um sowohl die Kunden und CustomerTypes werden aus dem gesicherten zurückgegeben worden:

ngOnInit() { 
    let id = this._routeParams.get('id'); 
    this._service.getCustomer(id).subscribe(customer => { 
     this.customer = customer; 
     this.updateCustomerType(); 
    }); 
    this._service.getCustomerTypes().subscribe(customerTypes =>{ 
     this.customerTypes = customerTypes; 
     this.updateCustomerType(); 
    }); 
} 
private updateCustomerType(): void{ 
    if(this.customer.customerType != null && this.customerTypes.length != null){ 
    for (var customerType of this.customerTypes) { 
     console.log("Customer Type: ", customerType); 
     if(this.customer.customerType.id == customerType.id){ 
     this.customer.customerType = customerType; 
     } 
    } 
    } 
} 

Answer 2

gelöst zu replizieren empfehle ich Ihnen den Ansatz ändern für dieses Gebäude, das von einer ausgewählten Komponente zu erstellen:

import {Component, Output, EventEmitter} from 'angular2/core'; 

@Component({ 
    selector: 'custype-selector', 
    template: ` 
    <div> 
     <label>Cust type</label> 
     <select #sel (change)="select.emit(sel.value)"> 
      <option *ngFor="#custype of customertypes"> {{custype}} </option> 
     </select> 
    </div>` 
}) 
export class CusTypeSelector { 
    @Output() select = new EventEmitter(); 
    customertypes= ["type1", "type2"] 

    ngOnInit(){ 
     this.select.emit(this.customertypes[0]); 
    } 
} 

ich das Array in Selektor fest einprogrammiert haben, aber Sie können einen Eingabeparameter an die Komponente mit Ihrem customertypes natürlich hinzufügen, wenn Sie

mögen

Sie könnten dann die obige Komponente wie folgt verwenden:

<custype-selector (select)="custype = $event"></custype-selector> 

Answer 3

Ich hatte das gleiche Problem, und ich löste es auf diese Weise:

<select class="form-control" required [(ngModel)]="customer.customerType" > 
    <option *ngFor="let ct of customerTypes" 
     [ngValue]="ct" 
     [attr.selected]="customer.customerType.customerType==ct.customerType ? true : null" 
     >{{ct.customerType}}</option> 
</select> 

Dank Günter Zöchbauer