从 firebase 创建动态卡片 Ionic v2答案

【问题标题】：Create dynamic cards Ionic v2 from firebase从 firebase 创建动态卡片 Ionic v2
【发布时间】：2017-09-28 16:48:23
【问题描述】：

我正在尝试从我的 firebase 数据库中创建动态离子卡。我正在使用 ngFor，但每张卡都包含一系列按钮。当我创建卡片时，它们都会获得所有可用的按钮。我怎样才能让它们只创建链接到它们的按钮？或者有更好的方法吗？

databaseRef.on("child_added",(snapshot)=>{
  var cat=snapshot.child("Name").val();
  var icon=snapshot.child("Icon").val();
  this.types.push({
    title: cat,
    icon: icon
  });
  var cardLists= document.getElementsByClassName("cardList");

  console.log(cardLists.namedItem); 
  databaseRef2=database.ref().child("Catalogos").child(cat).child("SubCatalogos");
  databaseRef2.on("child_added",(snapshot)=>{
    var sub=snapshot.child("Name").val();
    var icn=snapshot.child("Icon").val();
    var owner=snapshot.child("Owner").val();
    console.log(cat);
    console.log(owner);
    this.generes.push({
      title:sub,
      icon:icn,
      Owner:owner,
      previous:cat
    });
  });
});

HTML

<ion-card   *ngFor="let item of types" >
<ion-card-header color="light">
  {{item.title}}
  <ion-icon name="{{item.icon}}"></ion-icon>
  <ion-buttons end>
    <button ion-button color='light' clear>
      <ion-icon name='brush'></ion-icon>
    </button>
    <button ion-button color="light" clear (click)="presentPrompt2(item)" >
      <ion-icon name="add-circle"></ion-icon>
    </button>
  </ion-buttons>
</ion-card-header>
<ion-list id="cardList" >
  <button ion-item class="SubCards" *ngFor="let item of generes" (click)="itemTapped($event, item)">
    <ion-icon name="{{item.icon}}"  item-left></ion-icon>
    {{item.title}}
  </button>
</ion-list>

JSON 结构

"Catalogos" : {
"Books" : {
  "Icon" : "book",
  "Name" : "Books",
  "SubCatalogos" : {
    "Comedy" : {
      "Icon" : "happy",
      "Name" : "Comedy",
      "Owner" : "Books"
    }
  }
},
"Magazines" : {
  "Icon" : "book",
  "Name" : "Magazines",
  "SubCatalogos" : {
    "Horror" : {
      "Icon" : "book",
      "Name" : "Horror",
      "Owner" : "Magazines"
    }
  }
}
}

（如果我使用 createElement() 创建所有内容并自己制作所有内容，则它可以正常工作，但是根本没有卡片出现）完整代码在链接here

【问题讨论】：

您可以检查卡片是否需要所有带有布尔值的按钮。在示例中，按钮 1 具有 isneeded=false;然后在创建卡片之前，您可以使用 ngIf 检查此布尔值是否为真。如果它不为真，则将按钮设置为“不可见”，如果为真，则将按钮设置为“可见”。

标签： html typescript firebase firebase-realtime-database ionic2

【解决方案1】：

所以我设法解决了这个问题，我所做的是嵌套在第一个 ngIf 中以验证名称是否匹配，在该 ngIf 中我嵌套了另一个 For。我还更改了 JSON，取出所有 SubCatalog 并将其设为一个单独的节点，并为每个指向它所属的目录添加一个“父”键。

【讨论】：