const vendors = [
{name: 'test', age: 123},
{name: 'tes34t', age: 12233}
]
<select>
<option *ngFor="let l of vendors" (click)="findSso(l)">{{ l }} </option>
</select>
我的点击在 IE 中不起作用,它在 chrome 中有效。如何让它在 IE 中工作?
最佳答案
不是选项
上的(单击)
,而是选择
上的(更改)
。我建议这样做,因为它性能更高,并且只会在选项更改时触发。无论如何,这就是我们在这里寻找的东西。
在这里,试一试:
<select (change)="findSso($event.target.value)">
<option value="null" disabled>Select a Vendor</option>
<option *ngFor="let vendor of vendors" [value]="vendor.name">{{ vendor.name }} </option>
</select>
在你的组件中:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
vendors = [
{ name: 'test', age: 123 },
{ name: 'tes34t', age: 12233 }
];
findSso(selectedVendor) {
console.log('Got the selectedVendor as : ', selectedVendor);
// DO the needful here.
}
}
这是一个 Working Sample StackBlitz供您引用。
更新
如果你想传递完整的对象,你可以这样做:
<select #selectList (change)="findSso(selectList.value)">
<option value="null" disabled>Select a Vendor</option>
<option *ngFor="let vendor of vendors" value="{{ vendor | json }}">{{ vendor.name }} </option>
</select>
这里我们使用 json
管道将对象转换为字符串。
现在在您的模板中,只需对传入参数调用 JSON.parse
:
findSso(selectedVendor) {
console.log('Got the selectedVendor as : ', JSON.parse(selectedVendor));
}
代码已存在于示例 StackBlitz 中。
关于angular - 单击事件不适用于 Angular 4 中的选项标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53731899/