javascript - Angular 2 如何在选项中添加点击事件？

Question

这是我的 html，当我单击选项 "new-item" 时，它将打开 input type box ，然后我输入要添加的值以选择选项

<form (submit)="addItem()">
    <input type="text" [(ngModel)]="add.name" name="name">
    <input type="text" [(ngModel)]="add.price" name="price">
    <input type="text" [(ngModel)]="add.description" name="description">
    <select [(ngModel)]="add.type" name="room-type">
        <option [value]="c">Select</option>
        <option>BreakFast</option>
        <option>Lunch</option>
        <option>Dinner</option>
        <option><button (click)="addSelect()">Add-item</button></option>
        <input *ngIf='edited' type="text" >
   </select>

我的 typescript 是

addSelect() {
        this.edited = true;
}
constructor() {
    this.edited = false;
}

Answer 1

您不能将此类事件添加到 <option> .

您可以看到该事件并未在所有浏览器中触发(它唯一适用的浏览器是 < ie11 和 Firefox):

$("#trig").click((event) => console.log(event));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>default</option>
  <option id="trig">trigger</option>
</select>

标签不会向下传播任何点击事件。因此，您尝试在选项内分配的任何点击事件都将不起作用。最好的办法是查看您在 onChange() 中收到的值回调，然后打开另一个允许用户输入数据的组件。你甚至可以使用 window.prompt()得到这样的数据。

您可以改为这样做:

<select (change)="onChange($event.target.value)">

onChange(val) {
    console.log(val);
    this.edited = false;
}

有关实现此方法的更多信息，请参阅:How can I get new selection in "select" in Angular 2?