从 json 文件中检索数据并在离子列表视图中打印结果

Question

我的json代码被呈现。

{"samples":[
{"Date" : "Thursday 16 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "6:29 pm", "image1" : "E:Eventwwwimgimg2.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg5.jpg" }
{"Date" : "Tuesday 14 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:43 pm", "image1" : "E:Eventwwwimgimg6.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg4.jpg" }
{"Date" : "Friday 10 Mar","Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:03 pm", "image1" : "E:Eventwwwimgimg1.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg4.jpg" }

Answer 1

您的打字稿文件：

yourData = {
"samples":[
 {"Date" : "Thursday 16 Mar", "Data1" : "Sample Child","Data2" : "Sample       Class","Date" : "6:29 pm", "image1" : "E:Eventwwwimgimg2.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg5.jpg" }
{"Date" : "Tuesday 14 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:43 pm", "image1" : "E:Eventwwwimgimg6.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg4.jpg" }
{"Date" : "Friday 10 Mar","Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:03 pm", "image1" : "E:Eventwwwimgimg1.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg4.jpg" }]
}
listData = yourData.samples;
//component templatetemplateURL:
<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:Eventwwwimgimg2.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg5.jpg" }
{"Date" : "Tuesday 14 Mar", "Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:43 pm", "image1" : "E:Eventwwwimgimg6.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg4.jpg" }
{"Date" : "Friday 10 Mar","Data1" : "Sample Child","Data2" : "Sample Class","Date" : "12:03 pm", "image1" : "E:Eventwwwimgimg1.jpg", "text" : "Tiger Tale", "image2" : "E:Eventwwwimgimg4.jpg" }]    

并在 HTML 中使用ngFor

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