Wybrana opcja Angular2 z obiektami

Question

Mam aplikację Angular 2, która ma do czynienia z klientami i zapleczem wiosennym. Obiekt klienta ma typ klienta, który jest również obiektem, i rozwijam formularz klienta działający tak, że obiekty są przechowywane jako wartość, jednak nie mogę wymyślić, jak wybrać właściwy typ klienta, gdy istniejący klient jest ładowany do formularza.

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

W powyższym urywku, jeśli klient ma już typ klienta, menu nie wybierze żadnej wartości. Pamiętam ten sam problem z angular1 który został rozwiązany za pomocą ngOptions:

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

Więc moje pytanie brzmi, jak powtórzyć drogę Angular1 rozwiązać ten problem w Kątowymi 2

Answer 1

wziąłem lekko przylegający podejście zastępując wystąpienie CustomerType który jest zwracany w moim obiektu użytkownika, które odbyło się w tablicy CustomerType. Można to zrobić tylko raz, zarówno klienta i CustomerTypes zostały zwrócone od podłoża:

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

Proponuję zmienić podejście do budowanie tego, tworząc wybierz komponent:

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]); 
    } 
} 

mam sztywno tablicę do selektora, ale można oczywiście dodać parametr wejściowy do komponentu ze swoimi customertypes jeśli lubisz

można następnie użyć powyższego składnika takiego:

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

Answer 3

miałem ten sam problem i rozwiązać go w ten sposób:

<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> 

Dzięki Günter Zöchbauer