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 ，但是一旦键入任何值，就会调用 keypress 事件

Answer 2

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

说明：

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

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

2 个答案: