Сокрытие <th>в реактивных формах в угловых

Question

Можно ли скрыть элемент <th> в таблице?Я знаю, что это возможно на td's.Я пытался скрыть td's, если значение равно нулю, как значение, которое я пробовал в моем коде ниже.Пожалуйста, смотрите мой код ниже.Благодарю.Пожалуйста, смотрите эту ссылку для редактирования https://stackblitz.com/edit/angular-mjkwzu?file=app%2Fapp.component.html

<tr>
  <th>Date of Birth</th>
  <th>Nationality</th>
</tr>
</thead>
<tbody>
  <tr *ngFor="let row of bookingsForm.controls.profiles.controls; let i = index" [formGroupName]="i">
    <td *ngIf="row.value.date_of_birth !== null">{{row.value.date_of_birth}}</td>
    <td *ngIf="row.value.nationality !== null">{{row.value.nationality}}</td>
  </tr>

Answer 1

Вы можете сделать что-то вроде этого:

В вашем компоненте вычислить флаг на основе bookingsForm.controls.profiles.controls, например так:

public hideNationality:boolean = bookingsForm.controls.profiles.controls.every(x => x.value == null);

Затем подключите этот флаг к вашему столбцу с помощью*ngIf.

Более элегантный способ - построить Map<string, boolean> для каждого столбца и сохранить там флаг видимости.Затем выполните итерацию по каналу | keyvalue.