只显示具有的html元素将在angular html中获得真实条件

Question

我的html文件中有两个循环条件

• 第一个循环将显示一些文本描述

• 第二个是基于列中显示的描述数量的框数

  <tr *ngFor="let view3 of viewProgramDetails3; let ind = index;" style="white-space: pre-wrap;">
  <td>Step {{ ind + 1 }}</td>
  <td style="white-space: pre-wrap;">{{ view3.g_steps }}</td>
  <td>
  <h6>
  <span *ngFor="let item of arrayCbox; let in = index;">
  <ion-item *ngIf="view3.govthirdid == item.checkbox_stepsid">
  <ion-label>{{item.checkbox_stepsid}}</ion-label>
  <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
  </ion-item>
  </span>
  </h6>
  </td>
  </tr>
  

输出是正确的，因为如果只显示3个描述语句，复选框也只显示3。但问题是，如果条件不成立，它将创建一个新行，使表变大。

预期的输出有望与类似

step 1 |  description 1 |  checkbox 1
|  description 2 |  checkbox 2
|  description 3 |  checkbox 3

但实际输出与类似

step 1 | description 1 | checkbox 1
| description 2 | checkbox 2
| descripttion3 | checkbox 3
| (newline its empty)
| (newline its empty)
| (newline its empty)
| (newline its empty)

Answer 1

试着让你的整个<td>有条件：

<tr *ngFor="let view3 of viewProgramDetails3; let ind = index;" style="white-space: pre-wrap;">
<td>Step {{ ind + 1 }}</td>
<td style="white-space: pre-wrap;">{{ view3.g_steps }}</td>
<ng-container *ngFor="let item of arrayCbox; let in = index;">
<td *ngIf="view3.govthirdid == item.checkbox_stepsid">
<h6>
<ion-item>
<ion-label>{{item.checkbox_stepsid}}</ion-label>
<ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
</ion-item>
</h6>
</td>
</ng-container>
</tr>

Answer 2

不要将*ngFor放在<span>上，而是将其放在<ng-container>:上

<ng-container *ngFor="let item of arrayCbox; let in = index;">
<span *ngIf="view3.govthirdid == item.checkbox_stepsid">
<ion-item>
<ion-label>{{item.checkbox_stepsid}}</ion-label>
<ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
</ion-item>
</span>
</ng-container>

ng容器是一个特定角度的容器元素，在呈现后没有输出