Question

我在Angular 2组件中有一个select元素和一个按钮。我在按钮上有一个单击处理程序，当我单击该按钮时，我想访问select元素的值。我尝试过以下方法：

import { Component } from 'angular2/core';
import { Department } from "../classes/department";

@Component({
    selector: 'my-component',
    template: `
        <select #s>
            <option *ngFor="#department of departments" [value]="department">{{ department.id }}</option>
        </select>

        <button (click)="removeDepartment(s.value)">Remove</button>
    `
})
export class MyComponent {
    // ...

    removeDepartment(department: Department) : void {
        console.log(department);
        console.log(typeof department);
    }
}

基本上我有一个Department个对象数组，当我单击该按钮时，我试图将绑定到所选选项的对象传递给removeDepartment方法。我不知道我是否可以像我想要的那样使用s变量。结果是字符串[object Object]被传递给方法而不是对象。

我知道我可以通过change元素上的select事件完成我想要的操作，但我不想将当前选定的值存储在我的组件中，除非我必须。我也可以使用@ViewChild来解决这个问题，但如果可能的话，我更喜欢做类似于我想做的事情。

是否可以通过使用我正在尝试的变量传递当前选定的值，或者我是否必须在我的组件中保留变量并使用change事件更新它？

我正在使用Angular 2 beta 15。

Answer 1

如果您想将对象用作值，则需要使用ngValue而不是value。 value仅支持string并对分配给它的任何值进行字符串化：

<option *ngFor="let department of departments" [ngValue]="department">{{ department.id }}</option>

这已添加到beta.14

中

将所选选项传递给其他元素上的事件处理程序

1 个答案: