Angular 9 не вызывает valueChanges на входе из шаблона, когда это значение обновляется во время mat-option

Question

        <mat-form-field>
            <input matInput
                   [formControl]="affiliationName"
                   [matAutocomplete]="auto">
            <mat-label>Affiliation</mat-label>

            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let item of items"
                            [value]="item.value"
                            (onSelectionChange)="onAffiliationSelect(item)">
                    <span class="semibold">{{item.code}}</span>
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>

В коде -

affiliationName: FormControl;


ngOnInit() {
    this.listenToInput();
}


listenToInput() {
    this.affiliationName
        .valueChanges.pipe(
        debounceTime(300),
        distinctUntilChanged(),takeUntil(this.affiliationDestroy))
            .subscribe(value => {
                  //do something
            });
    }

Когда пользователь вводит в поле ввода, я хочу вызвать поиск на стороне сервера. Но после того, как я получу свои параметры, и пользователь выбирает параметр, и мой элемент управления формы заполняется выбранным параметром, я не хочу, чтобы valueChanges срабатывал, поэтому другой поиск не вызывался. Есть ли способ сделать это, не добавляя еще одну formControl или логическую переменную, которая будет управлять вызовом сервера?

Я видел этот ответ, но это не мой случай, так как у меня должен быть ввод, поэтому выберите не помогает мне. Angular 7 - не запускать «valueChanges» из шаблона (используя mat-option)

Answer 1

Попробуйте проверить, какой тип излучения исходит от valueChanges. Если это строка, это от пользователя, набирающего. Если это объект, он выбирается пользователем.

Чтобы это работало, вы должны установить значение mat-option для всего объекта, а не просто item.value. Кроме того, чтобы отобразить выбранное значение на входе, необходимо добавить атрибут displayWith к mat-autocomplete. Он получает функцию, которая принимает один аргумент (значение mat-option выбранной опции) и возвращает строку со значением, которое должно отображаться в элементе управления input.

<mat-form-field>
  <input matInput
         [formControl]="affiliationName"
         [matAutocomplete]="auto">
  <mat-label>Affiliation</mat-label>
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn()">
  <mat-option *ngFor="let item of items"
              [value]="item"
              (onSelectionChange)="onAffiliationSelect(item)">
    <span class="semibold">{{item.code}}</span>
  </mat-option>
</mat-autocomplete>

affiliationName: FormControl = new FormControl();

ngOnInit() {
  this.listenToInput();
}

displayFn(): (item: any) => string {
  return (item: any): string => item && item.value ? item.value : '';
}

listenToInput() {
  this.affiliationName 
    .valueChanges.pipe(
      filter((v: any) => typeof v === 'string'),
      debounceTime(300),
      distinctUntilChanged(),
      takeUntil(this.affiliationDestroy)
    ).subscribe(value => {
      //do something
    });
}