Question

我需要为一系列Angular组件创建一个类似于网格的视图，并且我需要在同一行中最多显示4个组件。

我找到的最接近的问题是这个问题：Angular 2 NgIf, dont render container element on condition but show its child elements

但是，如果容器中只有一个孩子，它会起作用。这也是我首先尝试的方法（我知道我可以使用其他情况）：

<ng-container *ngFor="let pair of responsePair;let i = index">
  <ng-container *ngIf="i % 4 == 0">
    <div class="row">
      <app-report-tile></app-report-tile>
    </div>
  </ng-container>

  <ng-container *ngIf="i % 4 != 0">
    <app-report-tile></app-report-tile>
  </ng-container>
</ng-container>

仅针对第四个要素打印行容器，我需要接下来的3个子组件才能成为此行容器的一部分。

是否可以在某些情况下不呈现HTML元素？

Answer 1

据我了解您的要求：

stackblitz

HTML：

<ng-container *ngFor="let pair of responsePair;let i = index">
    <div *ngIf="i%4 == 0" class="row">
        <div class="col">
            <hello></hello>
        </div>
        <div class="col">
            <hello></hello>
        </div>
        <div class="col">
            <hello></hello>
        </div>
        <div class="col">
            <hello></hello>
        </div>
    </div>
</ng-container>

Answer 2

UnluckyAj给了我一个主意，我自己找到了答案，我只创建了1行并提前获取了下一个元素：

<ng-container *ngFor="let pair of responsePair;let i = index">
  <ng-container *ngIf="i % 4 == 0">
    <div class="row">
      <app-report-tile *ngIf="responsePair[i] !== undefined" [data]="responsePair[i]" ></app-report-tile>
      <app-report-tile *ngIf="responsePair[i + 1] !== undefined" [data]="responsePair[i + 1]"></app-report-tile>
      <app-report-tile *ngIf="responsePair[i + 2] !== undefined" [data]="responsePair[i + 2]"></app-report-tile>
      <app-report-tile *ngIf="responsePair[i + 3] !== undefined" [data]="responsePair[i + 3]"></app-report-tile>
    </div>
  </ng-container>
</ng-container>

请确保在每个组件上使用* ngIf，以避免出现异常

角度2+，仅在有条件的情况下显示容器元素，但显示子元素

2 个答案: