Angular 2 Wie kann ich Click Event innerhalb Option hinzufügen?

Question

Das ist mein html ist, Wenn ich Option "new-item" klicken wird input type Feld öffnen, und geben Sie dann i Wert wollen es Option

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

und mein Typ Skript ist, zu wählen hinzuzufügen

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

Answer 1

Sie können ein solches Ereignis nicht zu einem <option> hinzufügen.

Sie können sehen, dass das Ereignis Feuer in nicht alle Browser (der einzige Browser es in funktioniert, ist < IE11 und 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>

Der Tag propagiert nicht nach unten alle Klickereignisse. Click-Ereignisse, die Sie versuchen und in einer Option zuweisen, funktionieren nicht. Am besten schauen Sie sich den Wert an, den Sie im Rückruf onChange() erhalten, und schalten dann eine andere Komponente ein, die es dem Benutzer ermöglicht, Daten einzugeben. Sie könnten sogar eine window.prompt() verwenden, um solche Daten zu erhalten.

Sie können dies stattdessen tun:

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

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

Für weitere Informationen über diesen Ansatz Umsetzung finden Sie unter: How can I get new selection in "select" in Angular 2?