2

以下のコードでは、国選択オプションが何度も起動され、ブラウザが応答しなくなりました。

<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]かどうかをチェックし、値が実際に変更されたかどうかをチェックして制限しようとしました! これで、火災イベントを減らすことができ、アプリケーションは正常に動作します。

mat-select コンポーネントを使用しているすべての場所で上記のロジックを含めているため、select-option を使用するより良い方法はありますか。

4

1 に答える 1

5

に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バインディングを every singlemat-optionに配置したことです。そのため、オプションを変更すると、選択したオプションごとに1回起動する可能性があります。1回だけ起動するように移動しmat-selectます。

于 2018-06-04T09:20:14.220 に答える