在角度材料中选择 mat-option 时调用 ngmodelchange答案

【问题标题】：ngmodelchange called when mat-option selected in angular material在角度材料中选择 mat-option 时调用 ngmodelchange
【发布时间】：2019-07-16 06:38:32
【问题描述】：

每当用户开始搜索将调用 HTTP 服务并获取响应并将其显示在下拉列表中时，我都会遇到这样的情况。

我有下面的代码，可以很好地使用上述方法。但是，在我们单击下拉列表中列出的任何选项后，ngmodelchange 方法再次调用 which 再次获取服务。它不应该发生。

我错过了什么？

<mat-form-field class="half-width">
            <input matInput aria-label="State" name="state" placeholder="Search by number (1 or 2 or 3)" [matAutocomplete]="auto" [(ngModel)]="currentState"
              (ngModelChange) = "filterInstrument(currentState)">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="state">
                <mat-option *ngFor="let state of insDetails" [value]="state.id">
                  <span>{{state.id}}</span> |
                  <span>{{state.userId}}</span> |
                  <span>{{state.title}}</span>                 
                </mat-option>
            </mat-autocomplete>
          </mat-form-field>

stackblitz中的完整代码

【问题讨论】：

标签： javascript html angular angular-material angular6

【解决方案1】：

尝试将ngModelChange 事件更改为keypress 事件

<mat-form-field class="half-width">
            <input matInput aria-label="State" name="state" placeholder="Search by number (1 or 2 or 3)" [matAutocomplete]="auto" [(ngModel)]="currentState"
              (keypress) = "filterInstrument(currentState)">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="state">
                <mat-option *ngFor="let state of insDetails" [value]="state.id">
                  <span>{{state.id}}</span> |
                  <span>{{state.userId}}</span> |
                  <span>{{state.title}}</span>                 
                </mat-option>
            </mat-autocomplete>
          </mat-form-field>

ngModelChange 会在输入值发生变化时被调用，但 keypress 事件会在你输入任何值时被调用

【讨论】：

如果我使用按键，无法捕获 ngmodel 值
(input) 事件更适合删除事件

【解决方案2】：

尝试使用 (input) 事件而不是 (ngModelChange)

解释：

“输入”事件，是一个同步事件当用户与基于文本的输入交互时触发控制。意思是，它不会等待模糊事件来计算 value-change - 输入事件在任何之后立即触发 value 属性的突变（是否通过用户按键事件或用户粘贴事件）。

【讨论】：

太棒了！感谢您的回答