如果不存在子元素，则隐藏元素

Question

我正在为以下情况寻找解决方案：

我有一个要通过搜索项目过滤的项目列表

但是它仍然显示分隔元素：

我正在运行的代码：

List.cast

当没有<ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title *ngIf="!isOn">Events</ion-title> <ion-searchbar [(ngModel)]="terms" *ngIf="isOn"></ion-searchbar> <ion-buttons slot="end"> <button (click)="toggleDetails()"> <ion-icon name="ios-search" size="large"></ion-icon> </button> <button (click)='onDismiss()'> <ion-icon name="options" size="large"></ion-icon> </button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content *ngIf='userReady'> <div *ngIf='months_filtered'> <ion-item-group *ngFor="let month of months_filtered; let i = index"> <ion-item-divider sticky color="secondary" lines="none"> <ion-text> <h4>{{ getMonthName(i) }}</h4> </ion-text> </ion-item-divider> <ion-item *ngFor="let event of month | search : terms"> {{ event.title }} </ion-item> </ion-item-group> </div> </ion-content> 要显示时，如何隐藏分隔线并显示文本“找不到结果”？

Answer 1

您可以像这样在*ngIf="month && month.length"中使用<ion-item-divider>：

<div *ngIf='months_filtered'>
    <ion-item-group *ngFor="let month of months_filtered; let i = index">
      <ion-item-divider sticky color="secondary" lines="none" *ngIf="month && month.length">
        <ion-text>
          <h4>{{ getMonthName(i) }}</h4>
        </ion-text>
      </ion-item-divider>
      <ion-item *ngFor="let event of month  | search : terms">
        {{ event.title }}
      </ion-item>
    </ion-item-group>
  </div>