时间戳

首页 > 解决方案 > 无法为 Angular Material 中的下拉菜单设置默认值

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

问题描述

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

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

标签： htmlangulartypescriptangular-materialdropdown

解决方案

  • 您的值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”将匹配其中一个选项的值，而不是作为对象引用

更新

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

推荐阅读