时间戳

首页 > 解决方案 > 在 Angular 中，在 *ngIf 中使用 *ngFor 不起作用

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

问题描述

所以我有一些代码

<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>

这会打印一个在另一个下面的框

我是 Angular 新手，可能缺少一些简单的东西。有谁知道为什么会这样。任何帮助将不胜感激。

标签： angular

解决方案

当您使用ngIf指令添加容器时，附加div可能会导致样式规则以不同方式应用于内部div。要消除外部div，请使用 Angular ng-container：

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

推荐阅读