2016-11-09 5 views
3

私はアプリケーションを構築するために角度2を使用しています。これは、これまでの私のコードです:あなたが見ることができるようにangular2のカスタムhtml属性値を取得します

テンプレート

<select class="form-control input-xs" [(ngModel)]="filter.coordinatorId" name="coordinatorId" (ngModelChange)="onCoordinatorChange($event)">                
    <option *ngFor="let coordinator of coordinators; let i = index" [value]="coordinator.id" [selected]="i==0">{{coordinator.name}}</option>          
</select> 

コンポーネント

onCoordinatorChange(coordinatorId: number){ 
     alert(coordinatorId); 
     //business logic 
    } 

、私はので、私は、アラートでcoordinator.id値を取得していますoption[value]="coordinator.id"を設定し、私がそれをcoordinator.nameに変更すると、その価値が得られます。しかし、ここではcoordinator.id,coordinator.namecoordinator.departmentなどの複数の値を取得したいと思います。そのため、1つのソリューションはカンマで区切ってもかまいませんが、他のパラメータがある場合は醜く維持しにくいでしょう。私は関数を記述するために、他のオプションに何かありますか:

onCoordinatorChange(coordinatorId: number, name: string, department: string){ 
      alert(coordinatorId); 
      //business logic 
} 

答えて

2

[value]の代わりに[ngValue]を使用して設定してくださいオブジェクト全体を値として渡すと、オブジェクト全体が渡され、その属性にアクセスできます。

<select class="form-control input-xs" [(ngModel)]="filter.coordinator" name="coordinatorId" (ngModelChange)="onCoordinatorChange($event)">                
    <option *ngFor="let coordinator of coordinators; let i = index" [ngValue]="coordinator" [selected]="i==0">{{coordinator.name}}</option>          
</select> 
+1

すごい答えはほとんど時間のない+1になっています。受け入れることを混乱させた;) – Imad

2

をあなたは代わりに[value][ngValue]を使用し、これは

かかわらに変更する必要があります代わりに coordinator.id

[ngValue]="coordinator" 

coordinatorを渡すことができます

[(ngModel)]="filter.coordinator" 
+1

両方の素晴らしい答えは、ほとんど時間のない+1になりました。受け入れることを混乱させた;) – Imad

+1

ステファンを受け入れる。 。 。 。 。 。 –

+1

本当に面白い状況、ハハ! stackoverflowメタに投稿を書いて、2つの答えを受け入れるオプションを求めます。 ;-) –

関連する問題