Angular 7中动态绑定下拉框值及解决相关报错问题

看起来你在Angular Material下拉框绑定和表单控件上遇到了两个问题：Cannot find control with name: 'user Input' 错误，以及下拉框未加载选项值。我来帮你一步步排查修复：

1. 先解决表单控件初始化的问题 #

你的表单构建代码里，approver控件的初始值设置成了对象 { value: '', viewValue: ''}，但实际上mat-select绑定的[value]是单个字符串（approver[i].value），表单控件的值应该匹配这个类型，而不是对象。另外错误提示的'user Input'，如果你的模板里只有formControlName="approver"，大概率是某个地方的笔误，但先修正表单初始化：

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    // 把初始值改为空字符串，匹配下拉框的value类型
    approver: ['']
  });
}

2. 修正下拉框选项数组的构建逻辑 #

你的getApprover函数里，循环赋值时把this.approver[i]设置成了数组（[{ value: ... }]），但approver应该是ExApprover[]类型，每个元素是单个对象，不是数组。这会导致*ngFor遍历的时候无法正确渲染选项。修改getApprover：

getApprover(): ExApprover[] {
  console.log('123');
  this.selectedRowData = this.data.Dialog_rowData;
  // 先清空原数组，避免残留旧数据
  this.approver = [];
  for (let i = 0; i < this.selectedRowData.length; i++) {
    // 直接push单个对象到数组，而不是给索引赋值数组
    this.approver.push({
      value: this.selectedRowData[i].approverList.login0,
      viewValue: this.selectedRowData[i].approverList.name0
    });
  }
  console.log(this.approver);
  return this.approver;
}

3. 优化数据初始化的生命周期逻辑 #

你之前在constructor里用of(this.getApprover()).subscribe的方式完全没必要，因为getApprover已经直接修改了this.approver，而且Angular中更推荐在ngOnInit里做初始化逻辑，符合组件生命周期：

ngOnInit() {
  // 直接在ngOnInit里调用getApprover初始化下拉框数据
  this.getApprover();
}

4. 简化模板中的循环绑定 #

你的模板里用approver[i].value和approver[i].viewValue有点冗余，其实可以直接用循环变量，更简洁也避免索引错误：

<mat-select formControlName="approver">
  <mat-option *ngFor="let item of approver" [value]="item.value">
    {{item.viewValue}}
  </mat-option>
</mat-select>

5. 排查'Cannot find control with name: 'user Input''错误 #

如果上述修改后还出现这个错误，仔细检查你的模板中是否有其他formControlName="user Input"的控件，而这个控件没有在formBuilder.group中定义。确保所有表单控件的formControlName都在表单组中有对应的定义。

经过这些修改后，下拉框应该能正确加载选中行的列值作为选项，表单控件的错误也会消失。

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