在 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 等。因此，一种解决方案可能是使用逗号分隔，但如果出现其他参数，这将很难看且难以维护。我还有其他选择来编写我的函数吗：

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

Answer 1

您可以使用 [ngValue] 而不是 [value] 并传递 coordinator 而不是 coordinator.id

[ngValue]="coordinator"

这需要更改为

[(ngModel)]="filter.coordinator"

Answer 2

使用 [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>

在 angular2 中获取自定义 html 属性值

Get custom html attribute values in angular2

angular2-template

angular