selectionChange не генерирует для опции по умолчанию в mat-select - Angular Material

Question

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

<mat-form-field>
          <mat-select [(value)]="selectedSearchView"  (selectionChange)="onSelectionChange($event)" >
            <mat-option *ngFor="let view of searchViews; let i=index" [value]="view">
              {{view.name}}
            </mat-option>
          </mat-select>
</mat-form-field>

Есть ли способ позвонить onSelectionChange($event), когда инициализируется mat-select?

Answer 1

Вы можете попробовать добавить шаблон ссылки (здесь: #select):

<mat-form-field>
          <mat-select #select [(value)]="selectedSearchView"  (selectionChange)="onSelectionChange($event)" >
            <mat-option *ngFor="let view of searchViews; let i=index" [value]="view">
              {{view.name}}
            </mat-option>
          </mat-select>
</mat-form-field>

Затем в своей части Ts, если вы заполните это значение по умолчанию следующим образом:

constructor() {
    this.selectedSearchView = this.searchViews[0]
  }

Вы можете продолжить использовать AfterViewInit и ViewChild следующим образом:

export class MyComponent implements AfterViewInit {

  selectedSearchView;
  searchViews = [
  {'name':'abc'},
  {'name':'def'},
  {'name':'ghi'}];

  @ViewChild('select') select;

  constructor() {
    this.selectedSearchView = this.searchViews[0]
  }

  onSelectionChange(event) {
    console.log('onSelectionChange called ! passed event :', event);
  }

  ngAfterViewInit() {
    if (this.select.value) {
      // here you can pass whatever you want as a parameter , I made an event-like object
      this.onSelectionChange({source:this.select, value: this.select.value});
    }
  }

}

Рабочая демонстрация. (у вас будет Error: Object too large to inspect. Open your browser console to view., так что откройтеконсоль вашего браузера :))