ユーザーがテキストを入力してヒットしたり、データリストからアイテムをクリックしたときのトリガーイベント

Question

複数の電子メールを入力するための入力フィールドと、データリストに表示される以前に使用された電子メールのリストがあります。ユーザーがボックスにテキストを入力してEnterキーを押すか、データリストから値を選択するたびに、onNewToEmailAdded（）メソッドを呼び出す必要があります。どうすればいいのですか（私はAngular 2を使っています）。現時点では、メソッドは、項目がリストから選択されるとエンターキーがヒットした場合にのみ呼び出されます。電子メールは、このようにあなたのソリューションが唯一の選択後に押されたキーを入力してくださいに取り組んで、あなたのリスト上でクリックされたときに

<input type="email" class="form-control" [(ngModel)]="nweEmail" (keyup.enter)="onNewToEmailAdded()" 
    list="toEmailsList" /> 
<datalist id="toEmailsList"> 
    <option *ngFor="let email of previousToEmails">{{email}}</option> 
</datalist> 

Answer 1

によりデータリスト上のイベントの不足のために、あなたは直接イベントをトリガすることはできません。しかし、あなたはまだのような入力要素に（入力）イベントを使用して回避策を使用することができます。

<input type="email" class="form-control" (input)="compareInput($event.target.value) "[(ngModel)]="nweEmail" (keyup.enter)="onNewToEmailAdded()" 
    list="toEmailsList" /> 
<datalist id="toEmailsList"> 
    <option *ngFor="let email of previousToEmails">{{email}}</option> 
</datalist> 

このイベントは、何かがその時点でフィールドに値を返す、入力フィールドに変更するたびにトリガされます

。そこから、返された値をpreviousToEmailsのリストと比較します。もし一致すれば、データリストの要素がクリックされたときにしたいことをします。

compareInput(value) { 
//if value is in the list do something 
} 

それはそれは奇妙につながる可能性が選ばれたように、イベントがトリガされます最後の文字に到達すると、ときに、ユーザーの種類、これを行うことにより、そのも念頭に置いて、それを選択せず​​previousList上にある電子メールを保管してくださいユーザーの動作。