从不同组件中使用时，表格行不会在列中拆分答案

【问题标题】：Table row does not split in columns when used from different component从不同组件中使用时，表格行不会在列中拆分
【发布时间】：2020-01-22 05:48:25
【问题描述】：

当我使用来自不同组件的表格行时，如何在列之间拆分表格行元素。所有行都转到“名字”<th> 列

客户端列表.html

<table mdbTable>
    <thead class="black white-text">
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone number</th>
        <th>Procedure</th>
        <th>Doctor</th>
        <th>Registration</th>
        <th>Registration</th>
        <th>Edit</th>
        <th>Serve</th>
      </tr>
    </thead>
     <tbody>
      <div *ngFor="let c of clients">
      <tr *ngIf="!c.isAlreadyServed" client-list-item  [client]="c"></tr>
      </div>
    </tbody>
  </table>

客户端列表项.html

  <td>{{client.firstName}}</td>
  <td>{{client.lastName}}</td>
  <td>{{client.phone}}</td>
  <td>{{client.procedure}}</td>
  <td>{{client.doctorsName}}</td>
  <td>{{client.registrationDate | date: 'medium'}}</td>
  <td><a href="">Edit</a></td>
  <td><a href="">Serve</a></td>

client-list-item.ts

@Component({
  selector: '[client-list-item]',
  templateUrl: './client-list-item.component.html',
  styleUrls: ['./client-list-item.component.css']
})
export class ClientListItemComponent {
  @Input() client: Client;
}

【问题讨论】：

尝试从 client-list-item.html 中删除 <tr> 和 </tr> 标记。
它不工作

标签： html angular html-table user-experience

【解决方案1】：

用ng-container 替换div 应该可以解决问题。 ng-container 元素不会进入最终渲染的 DOM，并用于在不污染 DOM 的情况下具有结构指令。

<ng-container *ngFor="let client of clients">
    <tr *ngIf="!c.isAlreadyServed" client-list-item  [client]="c"></tr>
</ng-container>

【讨论】：