时间戳

首页 > 解决方案 > 隐藏在 Angular 中的响应式表单中

angular - 隐藏在 Angular 中的响应式表单中

问题描述

是否可以隐藏<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>

标签： angularangular-reactive-formsangular-formsangular4-forms

解决方案

你可以这样做：

在您的组件中，计算一个基于 的标志bookingsForm.controls.profiles.controls，如下所示：

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

然后使用 . 将此标志连接到您的列*ngIf。

一种更优雅的方法是Map<string, boolean>为每一列构建一个并在其中存储一个可见性标志。| keyvalue然后通过管道对其进行迭代。

推荐阅读