Angular mat-select无法选中选项且控制台报Error trying to diff错误

问题根因 #

报错是因为你在onChangeCdp方法中，把用于渲染下拉选项的源数组tipoc直接赋值为了选中的字符串值（比如GASTO）。模板中*ngFor="let gas of tipoc"只能遍历数组/可迭代对象，遍历字符串时就会抛出该错误。

修复方案 #

1. TS代码调整 #

• 补充声明双向绑定[(ngModel)]对应的变量tipoCdpValue，初始化时直接赋值第一个选项作为默认选中值
• 修改onChangeCdp的赋值逻辑，将选中值存入专门的选中变量，不要修改选项源数组tipoc
  修改后完整TS代码：

interface tipoCdp {
  value: string;
  viewValue: string;
}

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...']
})

export class showValue implements OnInit {

  constructor (...) { ... }

  // 下拉选项源数组，仅用于渲染可选选项，不要修改该变量的值
  tipoc: tipoCdp[] = [
    {value: 'gasto-0', viewValue: 'GASTO'},
    {value: 'modificacion-1', viewValue: 'MODIFICACIÓN ANEXO DECRETO'}
  ];

  // 存储选中值的变量，和ngModel绑定，初始化默认选中第一个选项
  tipoCdpValue: string = this.tipoc[0].viewValue;

  onChangeCdp(event: string) {
    console.log(event);
    // 把选中值赋值给对应存储变量即可
    this.tipoCdpValue = event;
  }

}

2. HTML代码无需调整 #

你现有的HTML代码已经正确绑定了change事件和ngModel，无需修改。

修改完成后即可实现需求：默认选中第一个选项，选中任意选项时控制台打印对应值，同时值会自动存储到tipoCdpValue变量中，不会再抛出迭代错误。

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