设置 mat-select 的默认值答案

【问题标题】：Set default value for mat-select设置 mat-select 的默认值
【发布时间】：2020-07-02 10:32:47
【问题描述】：

我有一个垫选择。当我第一次显示表单时，我希望它在加载数据后选择选择中的第一项。我该怎么做？

  <mat-select 
          placeholder="period"
          (selectionChange)="selectperiod($event)"
          (ngModel)="(periodoptions)"
        >
          <mat-option
            *ngFor="let p of periodoptions | async"
            [value]="p.periodid"
          >
            {{ p.periodstart }}
          </mat-option>
        </mat-select>

使用 this 调用函数来提取剩余数据

 of(this.getperiods()).subscribe(pp => {
      this.periodoptions = pp;

【问题讨论】：

我认为你应该看看这个答案。 stackoverflow.com/questions/50650790/…

标签： angular angular-material

【解决方案1】：

如果您想使用 ngModel，只需将 (ngModel) 替换为 [(ngModel)]。您还可以将 ngModel 替换为 [(value)] 以避免使用 ngModel 模块。

另外，如果要选择数组的第一项，将 periodoptions 分配给 ngModel 是错误的，因为每个 mat-option 值都是 p.periodid。您将不得不改用 periodoptions[0].periodid

【讨论】：

【解决方案2】：

也许这可以帮助你：

<mat-select placeholder="period" (selectionChange)="selectperiod($event)" [(ngModel)]="periodoptions">
    <mat-option>Default Option</mat-option>
    <mat-option *ngFor="let p of periodoptions | async" [value]="p.periodid">
        {{ p.periodstart }}
    </mat-option>
</mat-select>

【讨论】：