如何将两个数组合并为对象数组？能否用ngFor避免重复渲染表格？

1. 使用 *ngFor 替代重复的 <table> 标签 #

你可以将两个表格的配置（标题和对应数据）合并成一个对象数组，然后通过 *ngFor 循环渲染每个表格，彻底避免重复代码。

组件端代码调整 #

在组件类中，创建一个包含表格配置的数组（用 getter 可以确保数据随原数组实时更新）：

// 保留你原有的数据数组
maxValueTable: number[] = [];
minValueTable: number[] = [];

// 生成合并后的表格配置数组
get valueTables() {
  return [
    { label: 'Max', values: this.maxValueTable },
    { label: 'Min', values: this.minValueTable }
  ];
}

// 原有的数据添加逻辑保持不变
// this.maxValueTable.push(selectedData.res.maxValue);
// this.minValueTable.push(selectedData.res.minValue);

模板端代码优化 #

把重复的表格代码替换为一个 *ngFor 循环：

<div style="display: flex;">
  <table style="width:100%" *ngFor="let table of valueTables">
    <thead>
      <tr>
        <th>{{ table.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let value of table.values">
        <td>{{ value | numberFormatter: (getUnit() | async) }}</td>
      </tr>
    </tbody>
  </table>
</div>

注意：你原模板里有拼写错误——第二个表格的 let maxValue of minValueTable 和 {{ MinValue | ... }} 应该统一为 let minValue of minValueTable 和 {{ minValue | ... }}，上述优化后的代码已经修正了这个问题。

2. 将两个数组合并为对象数组 #

根据你的需求，有两种常用的合并方式：

方式一：按表格维度合并（对应表格渲染需求） #

直接将每个数组和对应的标签包装成对象，组成新数组，就是上面组件代码里的写法：

const mergedTables = [
  { label: 'Max', values: this.maxValueTable },
  { label: 'Min', values: this.minValueTable }
];

方式二：按索引配对 max/min 值（关联同位置的数值） #

如果两个数组长度相同，且你想把每个索引对应的 max 和 min 合并为一个对象：

// 前提是两个数组长度一致
const pairedValues = this.maxValueTable.map((maxVal, index) => ({
  max: maxVal,
  min: this.minValueTable[index]
}));
// 结果示例：[{ max: 10, min: 2 }, { max: 15, min: 5 }, ...]

这种方式可以用来渲染成对的数据，比如一行同时显示一个 max 和 min：

<table style="width:100%">
  <thead>
    <tr>
      <th>Max</th>
      <th>Min</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let pair of pairedValues">
      <td>{{ pair.max | numberFormatter: (getUnit() | async) }}</td>
      <td>{{ pair.min | numberFormatter: (getUnit() | async) }}</td>
    </tr>
  </tbody>
</table>

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