以编程方式将可点击按钮添加到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>

我可以在我的 details.ts:

中像这样从存储中访问我需要的数组和值

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

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

知道如何实现吗？我已经浏览了所有我能找到的文档和 SO。在这个动态的东西上真的找不到太多。

Answer 1

ngFor 就是你想要的。

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

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

details.html

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

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

add clickable buttons to ionic 2 card programmatically

html

ionic-framework

angular-promise

ionic2