默认情况下，Angular Material mat-select 下拉菜单未绑定到对象选定值答案

【问题标题】：Angular Material mat-select dropdown not binding to object selected value by default默认情况下，Angular Material mat-select 下拉菜单未绑定到对象选定值
【发布时间】：2019-11-09 18:51:22
【问题描述】：

我正在将一个对象传递给我的 Angular 组件并尝试让下拉菜单在呈现下拉菜单时显示已选择的值。在我当前的代码中，下拉列表仅显示第一个选项。我传入了第二个下拉选项的值。

在我的ts代码中，object.reason.code是一个值'EX2'的字符串

下拉列表绑定到

reasons ReasonList = [{name: 'EX1', code: "EX1'},  {name: 'EX2', code: "EX2'}, {name: 'EX3', code: "EX3'}]

这是我的html

<mat-select [(ngModel)]="object.reason.code"   [formControl]="myCtrl" required>
  <mat-option *ngFor="let reason of reasons" [value]="object.reason.code">{{reason.name}}</mat-option>
</mat-select>

所需的行为，如果 object.reason.code 未定义，则下拉列表为空白，否则如果字符串为 EX2，则下拉列表应显示 EX2 选项。

无论我选择了什么，更改都应该反映在 object.reason.code 中

我尝试将 [(ngModel)] 更改为 [(value)] 但没有任何效果。

我查看了以下帖子并按照步骤操作但没有成功

Angular Material: mat-select not selecting default

感谢任何帮助。

【问题讨论】：

你不需要使用 ngModel 和 formControl ，我有一个关于默认值选项的想法，检查我的回答希望这对你有用？？？？

标签： angular angular-material

【解决方案1】：

ngModel 只需声明一个变量并根据列表值（代码）设置值，我只是将一个空字符串作为默认值

组件

ReasonList = [{name: 'EX1', code: "EX1'},....] ;

object = { reason : { code : 'EX1' } }; // ? set default value to EX1

模板

<mat-select [(ngModel)]="object.reason.code"  required>
  <mat-option [value]="''"> Unselected </mat-option> 
  <mat-option *ngFor="let reason of reasons" [value]="object.reason.code">
      {{reason.name}}
   </mat-option>
</mat-select>

demo

【讨论】：