為什么 select 不能作為 mat-select 的 mat-option？

Question

我創建一個對話框來插入數據：

這是 html 頁面：

<input type="hidden" ngModel="{{au.id}}" name="id">
<mat-form-field>
  <mat-label>Name</mat-label>
  <input matInput [(ngModel)]="au.name" name="name">
</mat-form-field>
<br />
<mat-form-field>
  <mat-label>Sex</mat-label>
  <mat-select [(ngModel)]="au.sex" name="sex">   
      <mat-option [value]="nam">Nam</mat-option>
      <mat-option [value]="nu">Nu</mat-option> 
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-label>Birth Day</mat-label>
  <input matInput type="date" [(ngModel)]="au.birthDay" name="birthDay">
</mat-form-field>
<br />
<button mat-raised-button (click)="Save()">save</button>

這是 ts 文件：

export class Author {
  id: string;
  name: string;
  sex: string;
  birthDay: Date;
}
export class Author_PopupComponent {
  au: Author = new Author();
}

mat-select顯示 2 值，但我選擇了一個選項，它無法顯示在控件中選擇的值。

為什么 select 不能是 mat mat-select的mat-option ？

Answer 1

方法一

當您的值不是動態的時，將 [ value [value]替換為<mat-option [value]="nam">Nam</mat-option>中的值。

方法二

使用[value]時用單引號將您的 mat-option 值（字符串）括起來，將其視為動態值。