Angular 4下拉选择框mat-select中viewValue未定义问题求助

嘿，这问题我之前也踩过坑！咱们来把它捋明白：

问题根源 #

你现在给mat-option绑定的是[value]="option.value"，这意味着mat-select的(change)事件返回的MatSelectChange对象里，value属性只是你设置的那个单一值（比如例子里的数字1），而不是整个option对象。所以当你尝试访问selected.viewValue时，自然会得到undefined——因为这个值本身只是个数字/字符串，根本没有viewValue属性。

两种实用解决方案 #

方案1：绑定整个option对象作为value

直接把mat-option的[value]改成完整的option对象，选中后就能拿到所有属性：

修改后的HTML代码：

<mat-form-field>
  <mat-select placeholder="Choose location" (change)="onChange($event)">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

对应的TS代码可以直接访问属性：

import { MatSelectChange } from '@angular/material/select';

// ...

public onChange(selected: MatSelectChange): void {
  console.log(selected.value.value); // 拿到原option的value
  console.log(selected.value.viewValue); // 现在能正常获取viewValue了
}

方案2：通过选中的value匹配原数组中的option

如果你不想绑定整个对象（比如只需要传递id到后端），可以在TS里根据选中的value去原数组里查找对应的option：

TS代码修改如下：

import { MatSelectChange } from '@angular/material/select';

// ...

public onChange(selected: MatSelectChange): void {
  // 通过value匹配对应的option
  const selectedOption = this.options.find(opt => opt.value === selected.value);
  if (selectedOption) {
    console.log(selected.value); // 选中的单一value
    console.log(selectedOption.viewValue); // 拿到对应的viewValue
  }
}

这样就能完美解决viewValue未定义的问题啦！

内容的提问来源于stack exchange，提问作者Anil