如何实现Angular组件渲染多行表格行且不破坏表格格式

完全可以实现多行表格行的组件封装，同时完美适配标准HTML表格的渲染规则，不会出现内容挤到第一列的异常。

原有写法失效的根本原因 #

HTML表格有强约束的合法DOM层级规则，标准结构只能是 table > (thead/tbody/tfoot) > tr > td。浏览器在解析HTML构建DOM树的阶段（早于CSS加载执行），一旦发现层级中出现不符合规则的自定义标签（比如示例中的<person-row>），就会触发错误恢复逻辑：要么把自定义元素挪出表格结构，要么把元素内所有内容归并到第一个可识别的表格单元格中，这就是所有内容挤到第一列的核心原因——靠CSS修改自定义元素的display属性根本来不及修正已经构建错误的DOM结构。
另外示例代码里把结构指令*ngFor写成了ngFor，本身也存在Angular语法错误。

两种可落地的实现方式 #

方案1：多tbody分组实现（最稳妥，全兼容无坑） #

HTML标准明确允许单个<table>下存在多个<tbody>标签，用来对逻辑相关的行做分组，完全符合表格DOM规范。可以直接把组件的宿主设置为tbody元素，每个人员对应一个独立的tbody，内部放展示、编辑两行tr，从根源上避免DOM结构异常：

1. 修改组件的装饰器配置，用属性选择器挂载到tbody上，避免额外自定义标签：

import { Component, Input } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';

// 人员数据类型可根据实际业务调整
interface Person {
  name: string;
  available: boolean[];
}

@Component({
  selector: 'tbody[personRow]', // 选择器：带personRow属性的tbody元素
  standalone: true,
  imports: [NgFor, NgIf],
  template: `
    <tr>
      <td>{{person.name}}</td>
      <td *ngFor="let day of person.available">
        {{day ? 'yes' : 'no'}}
      </td>
      <td>{{sumDays(person.available)}}</td>
    </tr>
    <tr *ngIf="editMode">
      <td>Edit:</td>
      <td *ngFor="let day of person.available">
        <input type="checkbox" [checked]="day">
      </td>
      <td><button>保存</button></td>
    </tr>
  `
})
export class PersonRowComponent {
  @Input() person!: Person;
  editMode = false;

  sumDays(available: boolean[]) {
    return available.filter(Boolean).length;
  }
}

2. 修改父组件的表格模板，循环生成带组件属性的tbody即可：

<table>
  <thead>
    <tr>
     <td>Person</td>
     <td>Monday</td>
     <td>Tuesday</td>
     <td>Wednesday</td>
     <td>Thursday</td>
     <td>Friday</td>
     <td>Total</td>
    </tr>
  </thead>
  <!-- 循环生成tbody，挂载personRow组件，传入person数据 -->
  <tbody *ngFor="let person of people" personRow [person]="person">
  </tbody>
</table>

这种写法生成的DOM完全符合HTML规范，没有任何多余自定义标签，所有浏览器都能正常渲染，样式也不会出现异常。

方案2：属性选择器挂载到tr（适合单tr组件场景） #

如果封装的组件只需要输出单行tr，不需要额外的编辑行，可以直接把组件用属性选择器挂载到原生tr标签上，同样不会生成多余DOM节点：

• 组件选择器写为tr[personRow]
• 父模板循环时直接写<tr *ngFor="let person of people" personRow [person]="person"></tr>即可

不推荐的写法 #

部分教程会提到给自定义元素设置display: contents让宿主元素不参与渲染，这种方案在旧版本浏览器存在兼容问题，且本质没有解决DOM解析阶段的结构错误风险，不建议在生产环境使用。

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