无法为 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 是一个 link，显示了使用对象引用时设置 select 值的工作版本。

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;
}

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

Unable to set default value for dropdown in Angular Material

html

typescript

angular-material

dropdown

angular