Выбор мата: пусть он выберет первый вариант мата

Question

У меня много угловых материалов, которые выбирают выпадающие списки, и соответствующие им опции мата обновляются реактивным способом в зависимости от других значений (другими словами, существует фильтрация опций).Это может выглядеть так:

<mat-select #selects (selectionChange)='formChanges()' [placeholder]='element.label' [disabled]='false' required>
  <ng-container *ngFor="let opt of item.options; index as index">
  <mat-option *ngIf="!videoService.filterStore[item.id] || videoService.filterStore[item.id].filter.includes(index)" [value]="opt">
    {{opt.label}}
  </mat-option>
</ng-container>
</mat-select>

Я недоволен одним поведением: я не хочу, чтобы выбор был отменен.Я хочу, чтобы они всегда выбирали первый вариант, который проходит фильтр.

Answer 1

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

export class SelectExample {

  @ViewChild(MatSelect) select: MatSelect;

  updateSelectOptions() {
    // update the options
    ...

    // update the select value to the first item
    // might need to use a timeout to wait until the select has reloaded the options
    setTimeout(() => this.select.value = this.select.options[0].value);
  }
}