Angular 材質：當值為 null 時，在初始頁面加載時在 Mat-Select 中顯示空選項（無）

Question

物料為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.

Answer 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 中）