html - ngIf 仍然在 false 条件下渲染 div

Question

我正在尝试根据我的数据中的标志显示一系列 Material 卡。如果标志是假的，我仍然会在 DOM 中注入(inject)一个空的 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 循环遇到一个水果对象时，不是 一根香蕉，它会注入(inject)一个空的div，这会在卡片之间增加不应该有的空间，例如

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

我认为如果条件为假，什么也不会被渲染，但显然情况并非如此。

Answer 1

您的条件是 <mat-card> ，所以只有这个元素被删除。去除包装 <div>您需要输入 *ngIf关于<div>元素。由于一个元素上不能有两个结构指令，因此您必须将 <div> 包装起来。与 <ng-container>并移动*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>