如何将多对象数组的值提取为Angular ngFor可遍历的数组？

首先修正原数组的语法问题（对象属性名需加引号，否则在严格模式下会抛出语法错误）：

const obj_Array = [
  {"Information": {"ID": 1, "Name": "Frank"}},
  {"Route": {"Direction": "north", "Time": "10:50:24"}},
  {"Music": {"volume": "loud", "input": "3.5mm"}}
];

提取值生成目标数组 #

使用数组的flatMap结合Object.values方法，快速提取所有嵌套对象的值并转为字符串类型：

const String_Array = obj_Array.flatMap(item => {
  // 获取每个元素中的嵌套子对象（如Information对应的内容）
  const innerObject = Object.values(item)[0];
  // 提取子对象的所有值并转为字符串
  return Object.values(innerObject).map(value => String(value));
});

执行后得到的String_Array即为你需要的格式：

["1","Frank","north","10:50:24","loud","3.5mm"]

关于遍历报错的说明 #

你遇到的"数组无法遍历"问题，大概率是原数组存在语法错误（未给对象属性名加引号），导致JS引擎无法正确解析为数组；或是遍历方式有误（比如错误使用for...in遍历数组，而非for...of或数组原生方法）。修正语法后用上述方法处理，就能得到可被*ngFor直接使用的扁平数组，无需额外处理即可在Angular Material Table中展示。

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