Question

我正在将一个对象传递给我的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

感谢您的帮助。

Answer 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

默认情况下，“角度材质”垫选择下拉列表不绑定到对象选择的值

1 个答案: