ajouter des boutons cliquables à la carte ioniques 2

Question

programme

J'ai un modèle HTML, details.html, qui comprend ceci:

<ion-card>{...first card on page...}</ion-card> 

    <ion-card [hidden]="showColorBool"> 
    <ion-card-header> 
     Select a color 
    </ion-card-header> 
    <ion-card-content> 
     <!-- buttons should go here --> 
    </ion-card-content> 
    </ion-card> 

    <ion-card>{...next card on page...}</ion-card> 

je dois ajouter les boutons comme indiqué ci-dessus. Ils seront seront décorées en fonction des valeurs contenues dans le tableau détails que j'ai stocké dans le stockage local comme celui-ci:

<button ion-button color={{data[index][color]></button> 

Je suis en mesure d'accéder aux tableaux et les valeurs dont j'ai besoin de stockage comme ça dans mes détails. ts:

arr.then(data => { 
    console.log(data); 
    for (let index in data){ 
     console.log(data[index][color]); 
    } 
    }); 

1) Le nombre de boutons est toujours dynamique (0-10). 2) La valeur "couleur" est nécessaire pour définir la valeur de couleur des boutons. 3) Je ne peux pas mettre cette fonctionnalité dans son propre composant/page. Il doit être sur la page avec les autres cartes.

Une idée sur la façon dont je pourrais accomplir cela? J'ai été à travers les docs et SO pour tout ce que je pouvais trouver. Je ne pouvais pas vraiment trouver beaucoup sur ce truc dynamique.

Answer 1

ngPour est ce que vous cherchez.

directive ngFor: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

La directive ngFor vous permet de parcourir un tableau dans le modèle.

details.html

<button *ngFor="let item of data" ion-button color="{{item[color]}}"></button>