Erstellen Sie dynamische Karten Ionic v2 von Firebase

Question

Ich versuche, dynamisch ionische Karten aus meiner Firebase-Datenbank zu erstellen. Ich benutze ngFor, aber jede Karte enthält eine Reihe von Tasten. Wenn ich die Karten erstelle, bekommen sie alle verfügbaren Knöpfe. Wie kann ich sie so konditionieren, dass sie nur die Buttons erzeugen, die mit ihnen verknüpft sind? Oder gibt es einen besseren Weg, dies zu tun?

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 Struktur

(Wenn ich das alles mit createelement() erstellen und mache alles selbst es funktioniert, aber keine Karten zeigen überhaupt) Voll Code in dem Link here

Answer 1

So gelang es mir, das Problem zu lösen, was ich did wurde innerhalb der ersten für eine ngIf verschachtelt, um zu überprüfen, ob die Namen übereinstimmten, Innerhalb dieser ngIf verschachtelte ich die andere For. Außerdem habe ich den JSON geändert, ich habe den gesamten SubCatalog herausgenommen und ihn zu einem separaten Knoten gemacht und jedem einen "Parent" -Schlüssel hinzugefügt, der auf den Katalog verweist, zu dem er gehörte.