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

如您所见，我在 option 中设置了 [value]="coordinator.id" 所以我得到了 coordinator.id 值处于警报状态，如果我将其更改为 coordinator.name，那么我将获得该值。但在这里我想获得多个值，如 coordinator.id,coordinator.name,coordinator.department 等。所以一个解决方案可能是使用逗号separated 但如果其他参数出现，那将是丑陋且难以维护的。我是否还有其他选择来编写我的函数，例如:

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>