angular - 单击事件不适用于 Angular 4 中的选项标签

Question

 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 中工作？

Answer 1

不是选项上的(单击)，而是选择上的(更改)。我建议这样做，因为它性能更高，并且只会在选项更改时触发。无论如何，这就是我们在这里寻找的东西。

在这里，试一试:

<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 中。