Angular Material表格如何从Row元素提取指定valueOfApp值

你当前的问题本质是传入表格的数据源未做扁平化处理，行数据为嵌套结构，直接用json管道自然会输出完整对象。要单独取出applicationY对应的数值，有两种常用实现方案：

方案1：预处理数据源为扁平结构（推荐） #

这是最符合Angular Material表格设计预期的写法，在组件侧把接口返回的嵌套数据提前转换成你期望的平铺结构，后续模板逻辑简洁，渲染性能也更好。
转换逻辑示例：

// 接口返回的原始嵌套数据
const rawResponse = { 
  "Ali": [ 
    { "nameofApp": "applicationX", "valueOfApp": 10 }, 
    { "nameofApp": "applicationY", "valueOfApp": 20 }, 
    { "nameofApp": "applicationZ", "valueOfApp": 30 } 
  ] 
};

// 转换为平铺的行数据结构
const formattedRows = Object.entries(rawResponse).map(([personName, appRecords]) => {
  const rowItem: Record<string, string | number> = {
    personne: personName
  };
  appRecords.forEach(record => {
    rowItem[record.nameofApp] = record.valueOfApp;
  });
  return rowItem;
});

// 传入表格数据源
this.dataSource = new MatTableDataSource(formattedRows);

转换完成后每行数据结构就是你预期的{personne: "Ali", applicationX: 10, applicationY: 20, applicationZ: 30}，单元格直接取值即可：

<td mat-cell *matCellDef="let element">
  {{ element.applicationY }}
</td>

方案2：模板内直接查找取值（临时快速实现用） #

如果暂时不想调整数据源结构，也可以直接在模板内对当前行的嵌套数组做匹配查找，取出目标值。
首先需要在组件类内挂载Object，方便模板访问对象方法：

// 组件类内添加
Object = Object;

之后在单元格模板内写查找逻辑：

<td mat-cell *matCellDef="let element">
  {{ (Object.values(element)[0] as Array<{nameofApp: string, valueOfApp: number}>).find(item => item.nameofApp === 'applicationY')?.valueOfApp }}
</td>

注意：该方案每次单元格渲染都会执行数组查找，数据量大时会产生额外性能开销，且同类逻辑重复写在模板内不利于后续维护，仅适合临时调试或数据量极小的场景。

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