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

Чтобы отобразить текущую выбранную опцию во вводе, добавьте click к 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-multip-example.ts:

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