Angular中*ngFor无遍历项时如何隐藏父div

解决方案 #

你可以通过Angular的结构指令结合async管道实现子项为空时隐藏父div，以下是几种常用实现方案：

方案一：推荐方案（无重复订阅） #

通过*ngIf将observable返回的结果存为临时变量，再判断数组长度控制父元素显隐，不会重复触发observable订阅：

<ng-container *ngIf="files$ | async as files">
  <div *ngIf="files.length > 0" class="d-flex justify-content-around flex-wrap">
    <div *ngFor="let f of files" class="card m-2 card-size">
    </div>
  </div>
</ng-container>

当files为空数组时，父div会直接从DOM中移除，自然不会显示多余的边框。

方案二：单元素判断（写法更简洁） #

如果不想新增ng-container标签，也可以直接在父元素上做长度判断，适合热observable或者不会产生副作用的场景：

<div *ngIf="(files$ | async)?.length > 0" class="d-flex justify-content-around flex-wrap">
  <div *ngFor="let f of files$ | async" class="card m-2 card-size">
  </div>
</div>

方案三：CSS类动态隐藏 #

如果需要保留父元素在DOM中仅做视觉隐藏，可以用Bootstrap的d-none类动态绑定：

<div class="d-flex justify-content-around flex-wrap" [class.d-none]="(files$ | async)?.length === 0">
  <div *ngFor="let f of files$ | async" class="card m-2 card-size">
  </div>
</div>

原理解释 #

你之前设置border-0无效的原因是，父元素即使没有子节点，只要自身存在于DOM中，设置的布局样式、自定义边框、内外边距依然会生效，直接控制父元素的显隐是最直接的解决方案。

内容的提问来源于stack exchange，提问作者user2837961