是否可以隐藏表中的<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>
你可以这样做:
在您的组件中,根据bookingsForm.controls.profiles.controls
计算一个标志,如下所示:
public hideNationality:boolean = bookingsForm.controls.profiles.controls.every(x => x.value == null);
然后使用*ngIf
将此标记连接到您的列。
更优雅的方法是为每个列构建一个Map<string, boolean>
并在其中存储可见性标志。然后通过| keyvalue
管道迭代它。