Angular2 opzione selezionata con oggetti

Ho un'app Angular 2 che si occupa di clienti e di un punto di appoggio a molla. L'oggetto cliente ha un tipo di cliente, che è anche un oggetto, e ho il menu a discesa sul modulo cliente che funziona in modo che gli oggetti siano memorizzati come valore, tuttavia non riesco a capire come selezionare il tipo di cliente corretto quando un il cliente esistente viene caricato nel modulo.Angular2 opzione selezionata con oggetti

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

del frammento precedente se il cliente ha già un tipo di cliente, quindi la discesa non sarà selezionare qualsiasi valore. Mi ricordo di avere lo stesso problema con angular1 che è stato risolto utilizzando ngOptions:

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

Quindi, la mia domanda è, come replicare il modo in cui Angular1 risolto questo problema in Angular 2

fonte

2016-06-09 Drew

Assegnare il valore predefinito a 'customer.customerType' dovrebbe fare ciò che vuoi. 'ngValue' e' customer.customerType' devono puntare alla stessa istanza dell'oggetto, non solo a due oggetti con lo stesso contenuto. –

Mi ero reso conto che aveva bisogno della stessa istanza di oggetto, piuttosto che di oggetti con lo stesso contenuto, ma mi chiedevo se c'era un modo in cui la selezione poteva essere passata a qualcosa di simile a un comparatore in java parlance, che avrebbe usato per valutare se le istanze dell'oggetto sono le stesse. Ho finito per sostituire l'istanza che viene restituita nella chiamata di resto, con l'oggetto equivalente dalle opzioni di selezione, che sembra davvero goffo. – Drew

Possibile duplicato di [Binding select element to object in Angular 2] (https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2) –

ho preso l'approccio un po 'goffo di sostituire l'istanza di CustomerType che viene restituita nel mio oggetto Customer, con quella detenuta nella matrice CustomerType. Questo può essere fatto solo una volta sia il cliente che CustomerTypes sono stati restituiti dalla sostenuta:

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

fonte

2016-06-13 20:05:32 Drew

ti suggerisco di cambiare l'approccio per la costruzione di questo, con la creazione di un componente di selezione:

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

ho hardcoded l'array in selettore, ma naturalmente è possibile aggiungere un parametro di input per il componente con i tuoi customertypes se ti piace

.210

È quindi possibile utilizzare il componente di cui sopra in questo modo:

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

fonte

2016-06-09 21:33:43 AngJobs

Grazie, mi piace l'aspetto di questo, e ci proveremo. Fuori dagli interessi, c'è una ragione per cui hai detto che i tipi di clienti potrebbero essere forniti come parametro, piuttosto che include il servizio che preleva i tipi di clienti dal backend REST API? Potrei vedere che è utile che un componente dell'elenco a discesa sia in grado di recuperare la sua lista di opzioni. – Drew

ho avuto lo stesso problema e ho risolto in questo modo:

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

Grazie alla Günter Zöchbauer

fonte

2016-08-22 09:09:21 Christoph

Angular2 opzione selezionata con oggetti

risposta

Problemi correlati