以编程方式将可点击按钮添加到 Ionic 2 卡

Question

我有一个HTML模板，details.html，其中包括以下内容：

  <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>

我需要添加如上所述的按钮。它们将根据我存储在本地存储中的详细信息数组中包含的值进行样式设置，如下所示：

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

我

能够在我的详细信息中从存储中访问我需要的数组和值.ts：

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

1( 按钮数量始终是动态的 (0-10(。2(需要"颜色"值来设置按钮的颜色值。3(我不能不将此功能放在它自己的组件/页面中。它需要与其他卡片一起出现在页面上。

关于我如何实现这一目标的任何想法？我已经浏览了文档和SO，以获取我能找到的所有内容。在这个动态的东西上找不到太多。

Answer 1

ngFor 就是你所追求的。

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

ngFor 指令允许您遍历模板中的数组。

详情.html

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