ngmodelchange在角度6材質中兩次調用

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>

也有可能顯示下拉列表中所示的選定值（以豎線分隔）嗎？ 在所選值中僅顯示當前id屬性。

Stackblitz中的完整代碼

有什么幫助嗎？

Answer 1

要在輸入中顯示當前選定的選項，請單擊添加到mat-option：

<mat-option *ngFor="let state of insDetails" [value]="state.id" (click) ="valueGet(state)">
     <span >{{state.id}}</span> |
     <span>{{state.userId}}</span> |
     <span>{{state.title}}</span>                 
</mat-option>

在select-multiple-example.ts中：

valueGet(state) {
   this.currentState = `${state.id} ${state.title} ${state.userId}`;
}