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

【问题标题】：How to get arrays from .json Ionic 2 Angular 2如何从 .json Ionic 2 Angular 2 获取数组
【发布时间】：2017-03-08 12:59:19
【问题描述】：

在有一个数组和另外 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

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

提前致谢！

【问题讨论】：

这里的问题是什么？你不知道怎么读json文件？如何在模板中循环它？
是的！我无法读取 json ;(
您需要调用您的文件。在这里查看答案stackoverflow.com/questions/36749153/…
如果可以的话，获取数组programms3并给我看一个例子！谢谢

标签： arrays json angular ionic2 angular2-template

【解决方案1】：

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

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

这里是working Plunker。

【讨论】：