Mat-select：让它选择第一个 mat-option答案

【问题标题】：Mat-select: have it select the first mat-optionMat-select：让它选择第一个 mat-option
【发布时间】：2018-11-23 17:48:51
【问题描述】：

我有许多角度材料选择下拉菜单，它们各自的垫子选项根据其他值以反应方式更新（换句话说，有选项过滤）。它可以看起来像这样

<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>

我对一种行为不满意：我不希望选择未分配。我希望他们始终选择通过过滤器的第一个选项。

【问题讨论】：

为什么不用formControl在组件中设置呢？我的意思是您可以在列表更新时找到过滤后的值并设置它

标签： angular drop-down-menu angular-material

【解决方案1】：

您只需要在列表更新时设置 select 的值。例如：

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);
  }
}

【讨论】：