Angular中如何遍历第三方UI控件返回的controls类数组对象？

你遇到的问题是因为第三方UI返回的controls是类数组对象——它具备数组的部分特征（比如length属性、数字索引），但并非标准的Array实例，所以没有自带forEach方法，直接调用不会触发回调。

以下是几种可行的遍历方案：

方案1：转换为真正的数组后使用forEach #

通过Array.from、扩展运算符或slice.call将类数组转为数组，再调用数组原生的forEach：

// 方法A：Array.from
Array.from(element.formGroup.controls).forEach(item => {
  console.log(item);
});

// 方法B：扩展运算符
[...element.formGroup.controls].forEach(item => {
  console.log(item);
});

// 方法C：slice.call
Array.prototype.slice.call(element.formGroup.controls).forEach(item => {
  console.log(item);
});

方案2：使用传统for循环 #

直接通过索引遍历类数组，无需转换：

const controls = element.formGroup.controls;
for (let i = 0; i < controls.length; i++) {
  console.log(controls[i]);
}

方案3：借用数组的forEach方法 #

直接调用数组原型上的forEach，并将类数组作为this传入：

Array.prototype.forEach.call(element.formGroup.controls, item => {
  console.log(item);
});

额外检查 #

如果尝试以上方法仍无输出，先确认element.formGroup.controls是否真的包含内容：

console.log(element.formGroup.controls.length); // 查看长度是否大于0

内容的提问来源于stack exchange，提问作者mnu-nasir