仅当其他元素没有孩子时，如何在Angular 7中显示一个元素

Question

我有一个简单的角7代码，其一般结构是这样：

<ng-container *ngFor="let item of items">
   <ion-item *ngIf="item.isReachable()">
       ......
   </ion-item>
</ng-container>
<ion-item id="target" *ngIf="ng-container has no children">
    <ion-label>
        Text to show only if ng-container has no children
    </ion-label>
</ion-item>

有人可以告诉我，只有在<ng-container>没有孩子的情况下，我才能显示target元素？我必须在*ngIf内写入此效果的条件是什么？

items是一个非空数阵列，因此我无法编写这样的条件*ngIf="items.length == 0"来获得我想要的东西。target元素仅在items数组的所有元素不满足isReachable()条件时才应显示，因此只有<ng-container>没有孩子。

有没有办法简单地在*ngIf条件内写这件？

Answer 1

如果要将其保存在JS中，则可以使用类似的Getter：

get hasChildren() {
  return this.items.some(item => item.isReachable());
}

模板

<ng-container *ngFor="let item of items">
   <ion-item *ngIf="item.isReachable()">
       ......
   </ion-item>
</ng-container>
<ion-item id="target" *ngIf="!hasChildren">
    <ion-label>
        Text to show only if ng-container has no children
    </ion-label>
</ion-item>

Answer 2

您可以仅使用CSS来做到这一点：

.items-container {
  border: 1px solid #ccc;
  margin: 12px;
}
.items-container:not(:empty) + ion-item {
  display: none;
}

<div class="items-container">
  <ng-container *ngFor="let item of items">
     <ion-item *ngIf="item.isReachable()">
         Here should be the items
     </ion-item>
  </ng-container>
</div>
<ion-item id="target" *ngIf="ng-container has no children">
    <ion-label>
        This text should not be displayed
    </ion-label>
</ion-item>
<div class="items-container"></div>
<ion-item id="target" *ngIf="ng-container has no children">
    <ion-label>
        Text to show only if ng-container has no children
    </ion-label>
</ion-item>

我为样式添加了一个项目容器，还因为您需要一个元素来使用CSS选择器(并且ng-container S未渲染(。

Answer 3

您需要的只是"如果"逻辑上方的ng-container上方

<div *ngIf="items.isThereAnyItemUnreachable(); else target">
  <ng-container *ngFor="let item of items">
     <ion-item *ngIf="item.isReachable()">
         ......
     </ion-item>
  </ng-container>
</div>
<ng-template #target>
  <ion-item>
    <ion-label>
        Text to show only if ng-container has no children
    </ion-label>
</ion-item>
</ng-template>