Скрыть элемент, если дочерних элементов не существует - PullRequest
Новая
       38

Скрыть элемент, если дочерних элементов не существует

0 голосов
/ 06 февраля 2019

Я пытаюсь найти решение для следующего случая:

У меня есть список элементов, которые я хочу отфильтровать с помощью поиска элементов List of items

Однако он по-прежнему показывает элементы делителя:

Dividers remain

Код, который я использую: 

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

Как скрытьделители и отображать текст «ничего не найдено», если вместо них нет <ion-item>, который должен отображаться вместо?

1 Ответ

0 голосов
/ 07 февраля 2019

Вы можете попробовать с *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>
...