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）需要“颜色”值来设置按钮的颜色值。 3）我不能将此功能放在它自己的组件/页面中。它需要与其他卡一起放在页面上。

关于如何实现这一目标的任何想法？我已经通过文档和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>

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

1 个答案: