После обновления до Angular 6, материал 6, выберите опцию «Событие запускается постоянно» и браузер зависает.Как остановить нежелательные события выброса?

Question

В приведенном ниже коде параметры выбора моей страны запускаются так много раз, что браузер перестает отвечать.

<div [formGroup]="countryForm">
  <mat-form-field>
    <mat-select formControlName="selectedCountry" class="my-item-text" placeholder="Country">
      <mat-option (onSelectionChange)="onCountrySelectionChanged($event)" *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

и код моего компонента, как показано ниже

  onCountrySelectionChanged(changeEvent) {
    if (changeEvent && changeEvent.isUserInput && this.selectedCountry != changeEvent.source.value) {
      this.countrySelected.emit( changeEvent.source.value);
    }
  }

Я пытался ограничить с помощьюпроверка, если его пользовательское событие изменения [isUserInput], а также проверка, действительно ли значение изменилось!Теперь я могу уменьшить количество событий пожара, и приложение работает нормально.

Есть ли лучший способ использовать опцию select, поскольку теперь я включаю вышеуказанную логику везде, где использую компонент mat-select.

Answer 1

mat-select имеет свойство Output, которое вы можете привязать к вызываемому selectionChange, которое должно срабатывать при каждом изменении параметра пользователем.Попробуйте переключить свой код на это:

<div [formGroup]="countryForm">
  <mat-form-field>
    <mat-select (selectionChange)="onCountrySelectionChanged($event)" formControlName="selectedCountry" class="my-item-text" placeholder="Country">
      <mat-option *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

Подумайте об этом - вероятно, произошло то, что вы установили привязку onSelectionChange на каждый mat-option, поэтому при изменении параметра выСкорее всего, один раз для каждого варианта на ваш выбор.Перемещение его на mat-select означает, что оно будет срабатывать только один раз.