Событие нажатия не работает для тега option в 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

Вместо (click) на option, выберите (change) на select.Я бы порекомендовал, так как он более производительный и будет срабатывать только при изменении параметра.И это то, что мы ищем здесь в любом случае.

Здесь, попробуйте это:

<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.
  }
}

---

Вот вам Рабочий пример 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.

Answer 2

Вместо (click) используйте событие изменения.и [(ngModel)] может использоваться для обнаружения изменений с помощью события ngModelChange.

И для <option></option> tag [ngValue] директива может принимать string или object, а с помощью ngModel мы можем отслеживатьсобытие изменения.

<select [ngModel]="selectedValue" (ngModelChange)="selectedValue=$event">
  <option value="null" disabled>Select a Vendor</option>
  <option *ngFor="let vendor of vendors" [ngValue]="vendor">{{ vendor.name }} </option>
</select>

Для справки добавлено stackblitz code.

Answer 3

onclick не является допустимым событием для тега option ( см. Здесь ).Вы должны использовать событие onchange в теге select, чтобы получить событие при изменении значения.Пример:

<select (change)="findSso($event.value)">
  <option *ngFor="let l of vendors" [value]="l">{{ l }} </option>
</select>