仅显示 html 元素将在 angular html 中获得真实条件答案

【问题标题】：Showing only html elements which have will get true condition in angular html仅显示 html 元素将在 angular html 中获得真实条件
【发布时间】：2019-04-12 19:19:21
【问题描述】：

我的 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)

【问题讨论】：

标签： javascript angular html ionic3

【解决方案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>

【讨论】：

如果条件为真，这将在表中创建另一列，我希望它垂直递增。尽管从预期的输出来看这是正确的
这是答案，我只是将离子项目包裹在 ion-grid 中

【解决方案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-container 是一个特定角度的容器元素，渲染后没有输出

【讨论】：