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）事件来使用解决方法，如：

<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列表之间的比较，如果是匹配，你可以做你想做的事情，如果点击了datalist上的元素。

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

请记住，通过执行此操作，当用户键入上一个列表中的电子邮件而不选择它时，一旦到达最后一个字符，事件将在选中时触发，这可能导致用户的奇怪行为

当用户输入文本并点击输入或点击数据列表中的项目时触发事件

1 个答案: