Angular子组件在父组件表格中全部渲染至第一列问题求助

问题现象 #

开发Angular应用时，父组件HomeComponent渲染表格，每行嵌入子组件TableEntriesComponent，但所有子组件内容都挤在表格第一列，无法对应到表头的各列位置。

相关代码 #

HomeComponent（父组件） #

HTML

<h1>
 Home Page
</h1>
<div id="HomeDiv">
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" [(ngModel)]="name" name="name" required >

        <br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" [(ngModel)]="email" required>

        <br>

        <label for="message">Message:</label>
        <textarea id="message"  [(ngModel)]="message" name="message" rows="4" required></textarea>

        <br>

    <input type="submit" value="Submit" (click)="OnSubmit()">
    </form>
    </div>
      <table Id="HomeTable" *ngIf=Issubmitted>
         <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Message</th>
            <th>Remove</th>
       </tr>
<tr *ngFor="let Msg of Messages; let Index=index">
<app-table-entries
        [Index]="Index"
        [Name]="Msg.Name"
        [Email]="Msg.Email"
        [Message]="Msg.Message"
        (onDelete)="onDelete($event)"
      >
</app-table-entries>      
</tr>
</table>

TypeScript

import {Component, OnInit } from '@angular/core';
import { ConstantPool } from '@angular/compiler';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

name:string='';
email:string='';
message:string='';
Issubmitted:boolean=false;
Messages:Array<any>=[];

onDelete(index: number): void {
    this.Messages.splice(index, 1);
  }

OnSubmit():void {
    this.Issubmitted=true;
    this.Messages.push({
      'Name':this.name,
      'Email':this.email,
      'Message':this.message
    });
} 

constructor() {}

ngOnInit() {}

}

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 8px;
}

input,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="submit"] {
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

#SubmittedValue {
    background-color: lightcoral;
    display: block;
    width: 50%;
    padding: 10pt;
    margin: 10pt;
    border-radius: 20pt;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

TableEntriesComponent（子组件） #

HTML

<td>{{Index+1}}</td>
<td>{{Name}}</td>
<td>{{Email}}</td>
<td>{{Message}}</td>
<td><button (click)="handleDelete()">Del</button></td>

TypeScript

import {Input, Output, Component, OnInit, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-table-entries',
  templateUrl: './table-entries.component.html',
  styleUrls: ['./table-entries.component.css']
})
export class TableEntriesComponent implements OnInit {
  @Input() Index: number;
  @Input() Name: string;
  @Input() Email: string;
  @Input() Message: string;
  @Output() onDelete: EventEmitter<number> = new EventEmitter<number>();
  
  handleDelete(): void {
    this.onDelete.emit(this.Index);
  }
  
  constructor() {}

  ngOnInit() {}

}

问题原因 #

HTML表格有严格的结构规则：<tr>标签的直接子元素只能是<td>或<th>。当前父组件中，<tr>内直接放置了自定义组件标签<app-table-entries>，浏览器解析时会把这个自定义标签视为一个块级容器，将子组件内部的所有<td>包裹在这个容器中，最终导致所有列内容被压缩到表格的第一列。

修复方案 #

推荐方案：修改子组件为属性选择器 #

1. 修改子组件的selector为属性形式，让组件可以直接附着在<tr>上：

// TableEntriesComponent.ts
@Component({
  selector: '[app-table-entries]', // 改为属性选择器
  templateUrl: './table-entries.component.html',
  styleUrls: ['./table-entries.component.css']
})

2. 父组件中，将<app-table-entries>标签改为<tr>的属性，并移除原标签：

<!-- HomeComponent.html -->
<tr *ngFor="let Msg of Messages; let Index=index" 
    app-table-entries
    [Index]="Index"
    [Name]="Msg.Name"
    [Email]="Msg.Email"
    [Message]="Msg.Message"
    (onDelete)="onDelete($event)">
</tr>

这样Angular会把子组件的<td>内容直接注入到<tr>内部，生成符合HTML规范的表格结构，列内容就能正确对应到表头位置。

备选方案：调整父组件表格结构（不推荐） #

若不想修改子组件选择器，可在父组件的<tr>内添加<td>并让子组件填充，但这种方式会导致<td>嵌套，不符合HTML规范，可能引发其他样式或渲染问题，不建议使用。

验证效果 #

修改完成后，表格每行的<tr>会直接包含子组件生成的5个<td>元素，与表头的5列一一对应，内容将正常显示在各自列中。

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