javascript - 仅显示 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)

标签： javascriptangularhtmlionic3

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>