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

我正试图为以下情况找到解决方案：

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

但是，它仍然显示分隔器元件：

我正在运行的代码：

<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>

事件
{{getMonthName（i）}
{{event.title}}

---

当没有要显示的

时，如何隐藏分隔符并显示“未找到结果”文本？

您可以在

中尝试使用

*ngIf=“month&&month.length”

，如下所示：

<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>

{{getMonthName（i）}
{{event.title}}

逻辑应该在“toggleDetails”函数中。您需要从months\u filtered collection中筛选月份。请您自己试一试或提供此函数的js代码，以便我们提供帮助。@AdityaBhave

toggleDetails

仅包含toggleDetails（）{this.isOn=！this.isOn；}