如何根据<th>值显示<td>内容？Angular表格数据渲染问题

问题分析 #

你当前的代码存在几个关键问题：

• 手动编写的前三个<td>顺序和表头（id、name、age）不匹配，导致列对应错误
• 处理array2数据的逻辑错误，没有通过id关联两个数组的条目，而是用了header.name == item[header.name]这种无效判断，无法正确匹配数据
• 嵌套循环会生成多余的单元格，导致表格结构混乱

解决方案 #

核心思路是通过id关联array1和array2的数据，然后根据表头的name字段，从合并后的数据中取出对应值渲染单元格。

方案1：模板中直接关联数据（无需修改组件数据）

修正后的模板代码：

<table>
  <thead>
    <tr>
      <!-- 表头循环保持不变 -->
      <th *ngFor="let head of headers">{{ head.name }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of array1">
      <!-- 找到当前person对应的array2额外信息 -->
      <ng-container let-extraInfo="array2.find(item => item.id === person.id)">
        <!-- 按表头循环生成单元格 -->
        <td *ngFor="let header of headers">
          <!-- 优先取person中的值，没有则取extraInfo中的，都没有显示'-' -->
          {{ person[header.name] || extraInfo?.[header.name] || '-' }}
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

方案2：组件中预处理合并数据（模板更简洁）

在组件里先把两个数组的数据合并成完整的对象数组，模板只需要直接循环渲染：

// 组件中合并数据
this.combinedArray = this.array1.map(person => {
  const extraInfo = this.array2.find(item => item.id === person.id) || {};
  return { ...person, ...extraInfo };
});

对应的模板代码：

<table>
  <thead>
    <tr>
      <th *ngFor="let head of headers">{{ head.name }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of combinedArray">
      <td *ngFor="let header of headers">
        {{ person[header.name] || '-' }}
      </td>
    </tr>
  </tbody>
</table>

效果说明 #

两种方案最终都会生成符合表头顺序的表格，缺失的字段会显示-，比如p1、p2的occupation、career等字段都会显示为-，p3的career、hobby也会显示为-，完全匹配你的需求。

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