在Angular中，使用* ngFor inside * ngIf不起作用

Question

所以我有一些代碼

<div class="square positive" *ngFor="let square of getEquipmentHealth()"></div>

這會一個接一個地打印盒子，但是如果我添加一個if條件，

<div *ngIf="getEquipmentHealthNumber() <= 3" >
  <div class="square positive" *ngFor="let square of getEquipmentHealth()"></div>
</div>

這會將盒子打印在另一個下面

我是棱角分明的新人，可能會錯過一些簡單的東西 有誰知道為什么會這樣。 任何幫助將不勝感激。

Answer 1

使用ngIf指令添加容器時，附加div可能會導致樣式規則以不同方式應用於內部div 。 要消除外部div ，請使用Angular ng-container ：

<ng-container *ngIf="getEquipmentHealthNumber() <= 3" >
  <div class="square positive" *ngFor="let square of getEquipmentHealth()"></div>
</ng-container>