无法为 Angular Material 中的下拉菜单设置默认值

Question

我在 Angular Material 中使用mat-select，如下所示：

<mat-form-field class="full-width">
   <mat-select (selectionChange)="dropdownSelectedItem($event)">
      <mat-option *ngFor="let item of itemList" [value]="item">
      {{item.name}}
      </mat-option>
   </mat-select>
</mat-form-field>

上面的下拉菜单很好，但下拉菜单没有默认值。

为了添加默认值，我添加了value="{{dropdownSelectedName}}"，如下所示：

<mat-form-field class="full-width">
   <mat-select (selectionChange)="dropdownSelectedItem($event)" value="{{dropdownSelectedName}}">
      <mat-option *ngFor="let item of itemList" [value]="item">
      {{item.name}}
      </mat-option>
   </mat-select>
</mat-form-field>

以上更改仍未填充默认下拉值。

我也试过[(value)]="dropdownSelectedName"

当我在组件中做console.log(this.dropdownSelectedName)时，我可以看到它有一个字符串值 mydefaultvalue

ngOnInit() {
    this.subs.sink = this.myService.listAll()
        .subscribe(r => {
            this.AllList = r;
        });
    this.dropdownSelectedName = "mydefaultvalue";
}

Answer 1

• mat-option 的值是对 item 对象的对象引用。
• 因此，您在mat-select 上设置的值必须与item 对象引用完全相同。

这意味着在你的组件中你的代码应该

this.dropdownSelectedName = [Insert Object Reference Here]

另一种方法是将您的mat-option 更改为设置

<mat-option *ngFor="let item of itemList" [value]="item.name">
  {{item.name}}
<mat-option>

通过此更改，您的“myDefaultValue”将匹配其中一个选项的值，而不是对象引用

更新

Here 是一个链接，显示了在使用对象引用时设置选择值的工作版本。

Answer 2

要将默认值设置为mat-select，您必须绑定compareWith 属性，该属性将比较值并设置默认值。

例子：

在您的 HTML 中：

<mat-form-field class="full-width">
   <mat-select (selectionChange)="dropdownSelectedItem($event)" [(ngModel)]="dropdownSelectedName" [compareWith]="compareFn">
      <mat-option *ngFor="let item of itemList" [value]="item">
      {{item.name}}
      </mat-option>
   </mat-select>
</mat-form-field>

在您的 TS 中：

compareFn(obj1: any, obj2: any) {
    return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}