ngmodelchange вызывается при выборе опции mat в угловом материале

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

Попробуйте использовать событие (input) вместо (ngModelChange)

Объяснение:

Событие "input" - это синхронное событие, которое запускается пользователем.взаимодействие с текстовыми элементами управления вводом.Это означает, что он не ожидает события размытия для вычисления изменения значения - событие ввода запускается сразу после любой мутации свойства значения (будь то через события нажатия клавиши пользователя или события вставки пользователем).

Answer 2

Попробуйте изменить событие 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 вызывается, если есть изменение входного значения, но нажатие клавиши событие вызывается после ввода любого значения