Ionic 2 Accordion Group - 显示空的离子卡，如果数据不可用，则根本不应该显示卡

Question

我正在尝试在 ionic 2 中创建手风琴组。单击后，它应该展开并显示“离子卡”，如果数据可用。问题是当我单击展开时，它会显示空的离子卡，如果没有数据，我根本不希望它显示卡。

下面是我的代码：

主页.html

<ion-list *ngFor="let item of items" (click)="toggleGroup(item)" [ngClass]="{active: isGroupShown(item)}">


  <ion-item>
    <ion-icon [name]="item.symbol" color="dark" item-left></ion-icon>
    <h2 [innerHTML]="item.title" class="Ride" item-left></h2>
    <ion-icon color="dark" item-right [name]="isGroupShown(item) ? 'remove' : 'add'"></ion-icon>
  </ion-item>

  <ion-card *ngIf="isGroupShown(item)">
    <ion-item>{{item.description}}
      <button fixed ion-button item-right clear (click)="goToItemDetails()" class="button">View</button>
    </ion-item>
  </ion-card>

</ion-list>

首页.ts

items = [{
    title: "Ride",
    symbol: "car",
    description: "Need a ride"

  },
  {
    title: "Meal",
    symbol: "restaurant",

  },
  {
    title: "Child-Care",
    symbol: "logo-reddit",
    icon: "add"
  },
];

shownGroup = null;

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

toggleGroup(group) {
  if (this.isGroupShown(group)) {
    this.shownGroup = null;
  } else {
    this.shownGroup = group;
  }
};
isGroupShown(group) {
  return this.shownGroup === group;
};

我做错了什么？

截图如下： Here, Ion-card shouldn't be visible or shown when there is no data. On toggle, it should only show card for that category if it is present else nothing

Answer 1

您需要添加更多条件以使卡片可见，例如

  <ion-card *ngIf="isGroupShown(item) && item.description && item.description !== ''">
    <ion-item>{{item.description}}
      <button fixed ion-button item-right clear (click)="goToItemDetails()" class="button">View</button>
    </ion-item>
  </ion-card>