Table 当从不同组件使用时，行不会拆分为列

Question

当我使用来自不同组件的 table 行时，如何在列之间拆分我的 table 行元素。所有行转到 'First Name' <th> 列

客户端-list.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>

客户列表-item.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>

客户列表-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;
}

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

Table 当从不同组件使用时，行不会拆分为列

Table row does not split in columns when used from different component

html

user-experience

html-table

angular