如何使用*ngFor、*ngIf在HTML表格中实现每行展示4个键值对

解决方案 #

你当前的代码存在两个核心问题：

• 每组键值对都单独生成了<tr>标签，导致每行只能显示1组
• <div>直接作为<table>的子元素不符合HTML表格规范，会触发浏览器异常渲染

推荐用TS层预处理数组的方案实现，逻辑清晰性能也更好，调整步骤如下： #

步骤1：组件ts中新增分块处理逻辑

把原本一维的Map键值对数组，按4个为一组转成二维数组：

// 加到你的app.component.ts中
get chunkedUiFields(): Array<Array<{key: string, value: any}>> {
  // 先把Map转成key-value格式的一维数组
  const keyValueList = Array.from(this.uiFields.entries()).map(([key, value]) => ({ key, value }));
  const chunkSize = 4;
  const result = [];
  // 按每组4个切割数组
  for (let i = 0; i < keyValueList.length; i += chunkSize) {
    result.push(keyValueList.slice(i, i + chunkSize));
  }
  return result;
}

步骤2：调整模板HTML代码

移除不规范的div嵌套，先循环行再循环每行内的键值对：

<table>
  <tbody>
    <!-- 循环每一行的分组 -->
    <tr *ngFor="let row of chunkedUiFields">
      <!-- 循环当前行内的键值对，每个占一个td -->
      <td *ngFor="let item of row">
        <label>{{item.key}}</label>
        <label>{{item.value}}</label>
      </td>
      <!-- 可选：最后一行不足4个时补空单元格，保证表格对齐 -->
      <td *ngIf="row.length < 4" [attr.colspan]="4 - row.length"></td>
    </tr>
  </tbody>
</table>

如果不想在TS层写处理逻辑，也可以用纯模板实现，但因为会重复调用keyvalue管道，性能稍差，仅作为备选：

<table>
  <tbody>
    <tr *ngFor="let _ of uiFields | keyvalue; let i = index">
      <ng-container *ngIf="i % 4 === 0">
        <td *ngFor="let offset of [0,1,2,3]" *ngIf="i + offset < (uiFields | keyvalue).length">
          <label>{{(uiFields | keyvalue)[i + offset].key}}</label>
          <label>{{(uiFields | keyvalue)[i + offset].value}}</label>
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

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