Angular JS：子组件呈现在第一列中，而不是父组件表中的相应列

问：

我正在开发一个 Angular 应用程序，其中我有一个父组件 （HomeComponent），它在每行中呈现一个带有子组件 （TableEntriesComponent） 的表。但是，我面临的问题是，所有子组件都在第一列而不是相应的列中呈现。

以下是代码的简化版本：

首页组件：

[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>

打字稿

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 {
    // Handle the deletion logic for the specified index
    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;
        }

ChildComponent：

[HTML全文]

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

打字稿

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 中，我有一个表，每行中都有子组件。但是，所有子组件都在第一列中呈现。我希望每个子组件都位于其对应的列中。

您能否查看我的代码并建议可能导致此问题的原因？我是否在模板或组件逻辑中遗漏了某些内容？

任何帮助或指导将不胜感激。谢谢！

目前即将推出的输出

预期输出如下