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]并传递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属性值

2 个答案: