web-dev-qa-db-fra.com

Angular2 option sélectionnée avec des objets

J'ai une application Angular 2 qui traite avec les clients et une source de repos printanière. L'objet client a un type de client, qui est également un objet, et j'ai la liste déroulante sur le formulaire client qui fonctionne de sorte que les objets soient stockés comme valeur. Cependant, je ne peux pas comprendre comment sélectionner le bon type de client lorsqu'un Le client existant est chargé dans le formulaire.

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

Dans l'extrait de code ci-dessus, si le client a déjà un type de client, le menu déroulant ne sélectionnera aucune valeur. Je me souviens d’avoir eu le même problème avec angular1 qui a été résolu avec ngOptions:

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

Ma question est donc la suivante: comment reproduire la façon dont Angular1 a résolu ce problème dans Angular 2

angularngforangularjs-ng-valueangular2-ngmodel
6
Drew

J'ai adopté une approche légèrement maladroite consistant à remplacer l'instance de CustomerType renvoyée dans mon objet Customer par celle conservée dans le tableau CustomerType. Cela ne peut être fait que lorsque les types Customer et CustomerTypes ont été renvoyés à partir du support sauvegardé:

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

J'ai eu le même problème et je l'ai résolu de cette façon:

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

Merci à Günter Zöchbauer

7
Christoph

Je vous suggère de changer l'approche pour construire ceci, en créant un composant select:

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

J'ai codé le tableau en sélecteur, mais vous pouvez bien sûr ajouter un paramètre Input au composant avec vos types customert si vous le souhaitez

vous pouvez alors utiliser le composant ci-dessus comme ceci:

<custype-selector (select)="custype = $event"></custype-selector>
0
AngJobs on Github