ngIf仍然在false条件下渲染div

Question

我正试图根据数据中的标志显示一系列材料卡。如果标志是falsy，我仍然会在DOM中注入一个空的div(从而获得额外的空间(。

假设我有一个具有isBanana标志的Fruit对象数组。我的模板看起来像：

<div *ngIf="fruit$ | async as fruits">
<!-- NOT bananas -->
<div *ngFor="let fruit of fruits">
<mat-card *ngIf="!fruit.isBanana" [fruit]="fruit"></mat-card>
</div>
<!-- Bananas -->
<div *ngFor="let fruit of fruits">
<mat-card *ngIf="fruit.isBanana" [fruit]="fruit"></mat-card>
</div>
</div>

我意识到在数组中循环两次并不理想，但由于我实际应用程序中的头/节，这只是一种必须的方式

总之，浏览器中的最终渲染是这样的，在第一个/非香蕉部分，我成功地获得了没有香蕉的卡片，但每次for循环遇到一个而不是香蕉的水果对象时，它都会注入一个空div，在卡片之间不应该有的地方增加空间，比如

<div class="ng-star-inserted">
<div>
<mat-card><!-- card template --></mat-card>
</div>
<div><!-- literally just an empty div --></div>
</div>

我认为，如果条件为false，则不会呈现任何，但显然不是这样。

Answer 1

您在<mat-card>上有条件，所以只有这个元素会被删除。要移除包装<div>，需要将*ngIf放在<div>元素上。由于不能在一个元素上有两个结构指令，因此必须用<ng-container>包装<div>，并将*ngFor移动到那里。<ng-container>不会被添加到DOM中，所以您最终会得到与没有它时相同的结构

<div *ngIf="fruit$ | async as fruits">
<!-- NOT bananas -->
<ng-container *ngFor="let fruit of fruits">
<div *ngIf="!fruit.isBanana">
<mat-card [fruit]="fruit"></mat-card>
</div>
</ng-container>
<!-- Bananas -->
<ng-container *ngFor="let fruit of fruits">
<div *ngIf="fruit.isBanana">
<mat-card [fruit]="fruit"></mat-card>
</div>
</ng-container>
</div>