javascript - 在 Angular Material 中选择 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 gets called if there is a change in the input value but the keypress event gets called once you type any value