Заголовок и содержимое таблицы не выравниваются в Angular с использованием Bootstrap

Question

Я создал таблицу с 3 столбцами и заголовками столбцов «Имя», «Возраст» и «Отдел», и я присвоил значения их соответствующим столбцам, я поставил условие, используя диапазон, если условие удаляется из таблицы заголовок и содержимое выравниваются, если ставится условие, то заголовок и содержимое столбца не выравниваются. в app.component. html file

<div class="table-responsive">
 <table class="table table-striped">
<thead>
  <tr>
    <th class="p-1" *ngFor="let column of columns">
      {{ column }}
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let value of newNames">
    <span *ngIf="value.name != 'Max'">
      <td class="p-1">
       {{value.name}}
      </td>
      <td class="p-1">
        {{value.age}}
       </td>
      <td class="p-1">
        {{value.department}}
       </td>
    </span>
    <span *ngIf="value.name == 'Max'">
      <td class="p-1">
       {{value.name}}
      </td>
      <td class="p-1">
        {{value.age}}
       </td>
      <td class="p-1">
        {{value.department + " changed to" + " IT"}}
       </td>
    </span>
  </tr>
</tbody>
</table>
</div>

В файле app.component.ts я добавил следующую строку кода.

import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
columns = ["Name", " Age", "Department"];
newNames = [
{
  name: "John",
  age: 28,
  department: "Accounting"
},
{
  name: "Max",
  age: 26,
  department: "Sports"
},
{
  name: "Rose",
  age: 24,
  department: "Arts"
}
];
} 

и в component.s css Я добавил

 @import "../styles.scss";

.table thead th {
 vertical-align: top;
 }

 th {
 white-space: nowrap;
 cursor: pointer;
 user-select: none;
 color: grey;
 }

 table {
 margin: 0;
 font-family: "Lato";
 font-size: 12px;
 }

 .table-responsive {
 min-height: 60px;
 }

 .cell {
  max-width: 250px;
 white-space: nowrap;
 overflow: hidden;
 display: inline-block;
 text-overflow: ellipsis;
 }

 .table thead th {
 vertical-align: top;
 }

может кто-нибудь мне помочь, как выровнять содержимое таблицы с заголовком таблицы.

Answer 1

Вы не должны использовать тег span внутри тега tr.

Для таких целей есть специальный тег Angular, который не нарушает разметку - ng-container.

Итак, ваше решение - заменить span на ng-container

<tr *ngFor="let value of newNames">
  <ng-container *ngIf="value.name != 'Max'">
    ...
  </ng-container>
  <ng-container *ngIf="value.name == 'Max'">
    ...
  </ng-container>
</tr>

Пример Ng-run