Отображение только HTML-элементов, которые будут иметь истинное состояние в угловых 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-container - это угловой элемент контейнера, который не выводится после рендеринга