在angular2中獲取自定義html屬性值

Question

我正在使用Angular 2構建我的應用程序。這是到目前爲止我的代碼：

模板

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

正如你所看到的，我設置[value]="coordinator.id"在option所以我在警戒讓coordinator.id值，如果我將其更改爲coordinator.name，那麼我將獲得該值。但在這裏，我想獲得多個值，如coordinator.id,coordinator.name,coordinator.department等。因此，一種解決方案可以使用逗號分隔，但如果其他參數出現，則會變得難看且難以維護。我有任何其他選項，以寫我的功能是這樣的：

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

Answer 1

使用[ngValue]代替[value]而只是設置整個對象作爲一個值，這樣你將通過整個對象，你將有權訪問它的所有屬性：

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

Answer 2

可以使用[ngValue]代替[value]和傳遞的coordinator，而不是coordinator.id

[ngValue]="coordinator" 

這將需要改變，雖然

[(ngModel)]="filter.coordinator"