ngmodelchange在角度6材质中两次调用

Question

I have a scenario whenever the user is start searching something which will call the http service and get the response and show it in the dropdown.

I have the below code which is working fine with the above approach. But, after we click any option listed from the dropdown, ngmodelchange method again calling which fetch the service again. It should not happen.

Where am I missing?

<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>

Also is there any possibility to show the selected value (pipe separated) as like shown in the dropdown? Currently id property alone is displayed in the selected value.

Complete Code in stackblitz

Any help?

Answer 1

To show the current selected option in input add click to 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>

In select-multiple-example.ts:

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