从 firebase 创建动态卡片 Ionic v2

Posted 2023-03-13

【中文标题】从 firebase 创建动态卡片 Ionic v2

【英文标题】：Create dynamic cards Ionic v2 from firebase

【发布时间】：2017-09-28 16:48:23

【问题描述】：

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

Ts

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 检查此布尔值是否为真。如果它不为真，则将按钮设置为“不可见”，如果为真，则将按钮设置为“可见”。

【参考方案1】：

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