为什么不能选择mat-select的mat-option？答案

【问题标题】：Why can't select a mat-option of mat-select?为什么不能选择mat-select的mat-option？
【发布时间】：2020-12-16 03:17:29
【问题描述】：

我创建一个对话框来插入数据：

这是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 个值，但我选择了一个选项，它无法显示控件中选择的值。

为什么不能选择mat-select 中的mat-option？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

方法一

当您的值不是动态的时，将您的 <mat-option [value]="nam">Nam</mat-option> 中的 [value] 替换为 value。

方法二

使用[value] 时用单引号将您的mat-option 值（字符串）括起来，将其视为动态值。

【讨论】：