将所选选项传递给其他元素上的事件处理程序
将所选选项传递给其他元素上的事件处理程序
提问于 2016-04-17 22:08:50
我在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]被传递给方法而不是对象。
我知道我可以通过select元素上的change事件完成我想要的事情，但是除非迫不得已，否则我不想将当前选定的值存储在我的组件中。我也可以使用@ViewChild，但如果可能的话，我更喜欢做一些与我正在尝试做的事情类似的事情。
是否可以像我正在尝试的那样使用变量传递当前选定的值，或者我是否必须在组件中保留一个变量并使用change事件更新它？
我使用的是Angular 2 beta 15。
回答 1
Stack Overflow用户
发布于 2016-04-17 22:11:18
如果你想使用object作为值，你需要使用ngValue而不是value。value仅支持string并对分配给它的任何值进行字符串化：
<option *ngFor="let department of departments" [ngValue]="department">{{ department.id }}</option>这是在beta.14中添加的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36677590
复制相关文章
相似问题
腾讯云开发者
