Angular 13中子组件循环渲染表格数据显示异常问题求解

问题原因 #

HTML 原生<table>元素有严格的嵌套规则：<tbody>的直接子节点必须是<tr>标签。你直接在<tbody>下使用自定义元素<app-contact-list>，浏览器渲染时会将不符合表格结构规则的自定义标签移出表格结构，导致组件内部的<tr>无法被正确识别为表格行，最终所有内容堆叠到同一个单元格中。

解决方案 #

按照以下两步调整即可修复渲染异常：

1. 修改list组件的选择器为属性选择器
   打开list组件对应的.ts文件，调整@Component装饰器的selector配置：

@Component({
  // 把原来的元素选择器 'app-contact-list' 改为属性选择器
  selector: '[app-contact-list]',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent {
  // 原有组件逻辑保持不变
  @Input() item: any;
  @Input() i: number;
}

2. 调整父组件内的组件调用方式
   将主应用组件<tbody>内的代码修改为在<tr>标签上使用该属性组件：

<tbody>
  <tr 
    app-contact-list
    *ngFor="let itemElement of listData; let ind=index" 
    [item]="itemElement" 
    [i]="ind"
  >
    <button class="btn btn-primary" type="button">View</button>
    <button class="btn btn-primary" type="button">Update</button>
    <button class="btn btn-primary" type="reset" (click)="removeItem(itemElement)">Delete</button>
  </tr>
</tbody>

修改后组件的宿主元素就是合法的<tr>标签，完全符合表格结构要求，渲染后每行数据会正常对应表格的列结构。

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