从Firebase创建动态卡离子V2

Question

我正在尝试从我的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((创建所有内容，并使其我自己工作，但是根本没有卡片(此处的链接中的完整代码

Answer 1

，所以我设法解决了问题，我所做的是在第一个ngif内嵌套，以验证ngif是否匹配了名称是否匹配，在ngif中，我嵌套了另一个。另外，我更改了JSON，我取出了所有subcatalog，并将其做出了单独的节点，并向每个指向其属于目录的每个键添加了一个"父"键。