angular keyup事件触发两次

Question

我正在开发一个数据列表功能。在输入的keyup事件中，我调用一个get请求，该请求发回一个字符串数组，该字符串数组填充数据列表

<input type="text (keyup)="findPostalCode($event)" list="codePostalId" />
<datalist id="codePostalId">
    <option *ngFor="let code of postalCodeList">{{code}}</option>
</datalist>

以下是管理按键事件的组件功能

 findPostalCode(event: any) {
    event.stopPropagation();
    event.preventDefault();
    this.postalCodeList = [];
    let text = event.target.value;
    if (text != null && text.length > 2) {
      this.produitImmobilierService.getPostalCodes(text).subscribe( result => {this.postalCodeList = result; });
    }
  }

当我在输入中输入一个字符时，keyup事件会触发两次。

Answer 1

我可以在您的ts代码中清楚地看到两个事件。第一个是stopPropagation((，第二个是preventDefault((。我不知道你为什么这样编码，但我建议你把它们包装在if条件中，这样事件就可以根据特定条件发生。

Answer 2

在输入的keyup.enter事件上尝试以下代码。

<input type="text (keyup.enter)="$event.preventDefault();findPostalCode($event)" list="codePostalId" />

希望它能解决您的问题，并且事件只会触发一次。