Question

是否可以在表中隐藏<th>元素？我知道它在td's上的可能性。我尝试隐藏td's，如果该值是null，就像我在下面的代码中尝试过的那样。请在下面查看我的代码。谢谢。请查看此链接以编辑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管道对其进行迭代。

隐藏在Angular中的反应形式

1 个答案: