Angular Material：当值为空时，在初始页面加载时在 Mat-Select 中显示空选项（无）答案

【问题标题】：Angular Material : Display empty option(None) in Mat-Select on initial page load when value is nullAngular Material：当值为空时，在初始页面加载时在 Mat-Select 中显示空选项（无）
【发布时间】：2021-08-21 04:39:44
【问题描述】：

当item为null时，需要在Material Select元素中显示空（None）选项。

    <mat-label>Status</mat-label>
    <mat-select formControlName="statusId">

        <mat-option>None</mat-option>

        <mat-option *ngFor="let item of statuses" [value]="item.id">
             {{ item.name }}
        </mat-option>
    </mat-select>
</mat-form-field>```

As seen in above snippet I need to display the "None" option selected by default when the page loads.

【问题讨论】：

标签： html angular angular-material

【解决方案1】：

StackBlitz 因此，您可以为 None 选项添加一个空值。

 <mat-select [formControl]="foodControl" name="food">
      <mat-option value="">None</mat-option>
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>

而且，在 ts 中，您可以像这样用空值初始化控件 foodControl = new FormControl('');

同样的事情也可以用 ngModel 来完成。（包含在 StackBlitz 中）

【讨论】：