for-each in ionic2 with angularjs2 [英] For-each in ionic2 with angularjs2

问题描述

我用IONIC-2 Beta版制作一个应用程序。我想使用 for-each 循环。是否可以在angular-V2中使用？

I make one application with IONIC-2 Beta version. I want to use for-each loop. is it possible to use for each in angular-V2?

谢谢。

推荐答案

首先在组件中，您必须声明要显示的数组：

First in the Component, you have to declare the array you want to show:

import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  displayData : [];

  constructor() {
    this.displayData = [
      {
        "text": "item 1",
        "value": 1
      },
      {
        "text": "item 2",
        "value": 2
      },
      {
        "text": "item 3",
        "value": 3
      },
      {
        "text": "item 4",
        "value": 4
      },
      {
        "text": "item 5",
        "value": 5
      },
    ];
  }
}

如果要更改代码中的值，你可以这样做：

If you want to change the values in the code, you can do it by doing:

// We iterate the array in the code
for(let data of this.displayData) {
  data.value = data.value + 5;
}

然后在你的视图中你可以像这样打印出来：

And then in your View you can print them like this:

<ion-content class="has-header">
  <ion-list *ngFor="let data of displayData; let i = index" no-lines>
    <ion-item>Index: {{ i }} - Text: {{ data.text }} - Value: {{ data.value }}</ion-item>
  </ion-list>
</ion-content>

请注意部分 * ngFor =让displayData数据其中：

• displayData 是我们在组件


• 让... 的数据定义一个名为<的新变量code> data ，它代表 displayData 数组的每个元素。


• we可以使用 data 变量访问每个数组元素的属性，并插入如 {{data.propertyName}} 。

• displayData is the array we defined in the Component
• let data of ... defines a new variable called data, which represents each of the elements of the displayData array.
• we can access the properties for each array element by using that data variable, and interpolation like {{ data.propertyName }}.

这篇关于for-each in ionic2 with angularjs2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！