藏 in Reactive Forms in Angular

问题描述 投票:1回答:1

是否可以隐藏表中的<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>
angular angular-reactive-forms angular-forms angular4-forms
1个回答
1
投票

你可以这样做:

在您的组件中,根据bookingsForm.controls.profiles.controls计算一个标志,如下所示:

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.