在角材料中选择了mat-option时调用ngmodelchange

Question

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

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

我在哪里想念？

<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中的完整代码

Answer 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被调用，如果有输入值发生变化，但一旦你输入任何值按键事件被调用

Answer 2

尝试使用（输入）事件而不是（ngModelChange）事件

说明：

“输入”事件是在用户与基于文本的输入控件进行交互时触发的同步事件。 这意味着，它不会等待模糊事件来计算值更改-在value属性发生任何更改后（无论是通过用户按键事件还是用户粘贴事件），都会立即触发输入事件。