Question

我的json代码已经出现。

{"samples":[
{"Date" : "Thursday 16 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "6:29 pm", "image1" : "E:\Event\www\img\img2.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img5.jpg" }
{"Date" : "Tuesday 14 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:43 pm", "image1" : "E:\Event\www\img\img6.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img4.jpg" }
{"Date" : "Friday 10 Mar","Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:03 pm", "image1" : "E:\Event\www\img\img1.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img4.jpg" }

Answer 1

你的打字稿文件：

yourData = {
"samples":[
 {"Date" : "Thursday 16 Mar", "Data1" : "Sample Child","Data2" : "Sample       Class","Date" : "6:29 pm", "image1" : "E:\Event\www\img\img2.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img5.jpg" }
{"Date" : "Tuesday 14 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:43 pm", "image1" : "E:\Event\www\img\img6.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img4.jpg" }
{"Date" : "Friday 10 Mar","Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:03 pm", "image1" : "E:\Event\www\img\img1.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img4.jpg" }]
}

listData = yourData.samples;

//component template\templateURL:
<ion-list *ngFor="let item of listData">
 <ion-item>
  {{item.Data1}}
  {{item.text}}
</ion-item>
</ion-list>

Answer 2

检查此plunk

在构造函数

中插入此代码

this.samples = [
 {"Date" : "Thursday 16 Mar", "Data1" : "Sample Child","Data2" : "Sample       Class","Date" : "6:29 pm", "image1" : "E:\Event\www\img\img2.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img5.jpg" }
{"Date" : "Tuesday 14 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:43 pm", "image1" : "E:\Event\www\img\img6.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img4.jpg" }
{"Date" : "Friday 10 Mar","Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:03 pm", "image1" : "E:\Event\www\img\img1.jpg", "text" : "Tiger Tale", "image2" : "E:\Event\www\img\img4.jpg" }]

并在html中使用ngFor

<ion-list>
    <ion-item *ngFor="let item of samples">
  {{item.Data1}}
  {{item.text}}
    </ion-item>
  </ion-list>

从json文件中检索数据并在ion-list视图中打印结果

2 个答案: