web-dev-qa-db-ja.com

オブジェクトを含むAngular2選択オプション

顧客を処理するAngular 2アプリとスプリングレストバックエンドがあります。顧客オブジェクトには、オブジェクトでもある顧客タイプがあり、顧客にドロップダウンがあります。フォームはオブジェクトが値として格納されるように機能しますが、既存の顧客がフォームに読み込まれるときに正しい顧客タイプを選択する方法がわかりません。

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

上記のスニペットでは、顧客がすでに顧客タイプを持っている場合、ドロップダウンは値を選択しません。 ngOptionsを使用して解決されたangular1で同じ問題が発生したことを覚えています。

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

だから、私の質問は、Angular1がこの問題を解決した方法をAngular 2

angularngforangularjs-ng-valueangular2-ngmodel
6
Drew

Customerオブジェクトで返されるCustomerTypeのインスタンスを、CustomerType配列で保持されているインスタンスに置き換えるという少し不格好なアプローチを採用しました。これは、CustomerとCustomerTypesの両方がバッキングから返された場合にのみ実行できます。

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

私は同じ問題を抱えていました、そして私はそれをこのように解決しました：

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

おかげで GünterZöchbauer

7
Christoph

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

配列をセレクターにハードコーディングしましたが、もちろん、必要に応じて、customertypesを使用してコンポーネントにInputパラメーターを追加できます。

次に、上記のコンポーネントを次のように使用できます。

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