Строка таблицы не разделяется на столбцы при использовании из другого компонента - PullRequest
Новая
       56

Строка таблицы не разделяется на столбцы при использовании из другого компонента

0 голосов
/ 21 сентября 2019

Как разделить элементы строки таблицы между столбцами, если я использую строку таблицы из другого компонента.Вся строка переходит к «Имя» <th> столбец

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

client-list-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>

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;
}

1 Ответ

2 голосов
/ 21 сентября 2019

Замена div на ng-container должна помочь.Элемент ng-container не попадает в окончательную версию DOM и используется для того, чтобы иметь структурные директивы без загрязнения DOM. 

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