angular - 当孩子中没有项目时，角度隐藏父div

Question

这是我的html

<div class="d-flex justify-content-around flex-wrap">
    <div *ngFor="let f of files$ | async" class="card m-2 card-size">
    </div>
</div>

当 observable 中没有项目时files$，我会看到父级的一个小边框。我已经尝试过border-0等但没有效果。当子div没有项目时，是否可以隐藏父div？

Answer 1

不是最好的解决方案，但你可以这样尝试：

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

编辑

谢谢@PVermeer！实际上，您可以将第二个*ngIf放入容器 div 中。

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