如何从 .json Ionic 2 Angular 2 获取数组

Question

在有一个数组和另外 7 个数组的应用程序中，我无法在模板中显示它。有人可以告诉我如何从 json 获取数组吗？

谢谢大家！

channel.json，名称为 channel:

{
  "version": 3.1,
  "get": true,
  "programms1": [
    {
      "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms2": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms3": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms4": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms5": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms6": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ],
  "programms7": [
    {
            "id": 1,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 2,
      "img": "image.png",
      "name": "name",
      "about": "about"
    },
    {
      "id": 3,
      "img": "image.png",
      "name": "name",
      "about": "about"
    }
  ]
}

离子模板：

<ion-list>
  <ion-item *ngIf="let channel channel.programms7">    
    <ion-icon name="play" item-left large></ion-icon>
    <h2>{{channel.name}}</h2>
    <p>{{channel.about}}</p>
  </ion-item>
<ion-list

请举例说明如何在模板中打印数组。

提前致谢！

Answer 1

您可以使用 ngFor 指令遍历模板中的数组：

<div *ngFor="let j of myJson.programms3">
    {{j.id}}
    {{j.img}}
    {{j.name}}
    {{j.about}}
</div>

这里是working Plunker。

如何从 .json Ionic 2 Angular 2 获取数组

How to get arrays from .json Ionic 2 Angular 2

arrays

json

ionic2

angular2-template

angular