Question

这是我调用本地JSON文件的方法。但是，JSON可以在浏览器控制台中看到，但HTML中没有看到任何内容页面，任何人都可以看到我的代码中缺少的任何内容。感谢

static

Answer 1

猜测你的loadUser（）函数是组件类的一部分，你可能需要调用＆＃34; data＆＃34;在您的模板中，将 data.results 分配给 this.data

<div *ngFor="let result of data">   
    <p>{{result.title}}</p>
</div>

Answer 2

我认为你需要这样做this.data是一个类型结果的数组。因此，您必须设置一个名为Result的模型。此外，如果您的JSON有多个结果，您应该这样做：

<强> collection.json

{
  "results":[ 
       {
         "id": 20,
         "title": "asdasd",
         "identifier": null,
         "colour_bg": "#bd2c2c",
         "colour_btn": "#a11212",
         "colour_content_bg": "#ffffff", 
         "logo_dashboard": "collection/21/SVwnz6tjluX81dIRNXjZo7issYUWyOVyD3LJFykm.png"‌,
         "logo_page": "collection/21/txgkqlkPA45mHSYtqZ5rFa4wLfHNUfXESE0xyhwp.png"‌
       },
       {
         "id": 21,
         "title": "Arsenal Test Collection",
         "identifier": null,
         "colour_bg": "#bd2c2c",
         "colour_btn": "#a11212",
         "colour_content_bg": "#ffffff", 
         "logo_dashboard": "collection/21/SVwnz6tjluX81dIRNXjZo7issYUWyOVyD3LJFykm.png"‌,
         "logo_page": "collection/21/txgkqlkPA45mHSYtqZ5rFa4wLfHNUfXESE0xyhwp.png"‌
       }
    ]
 }

<强> result.ts

import { Injectable } from '@angular/core';

@Injectable()
export class Result{

   id: number; 
   title: String;
   identifier: String; 
   colour_bg: String;
   colour_btn: String; 
   colour_content_bg: String; 
   logo_dashboard: String;
   logo_page: String;

   constructor(){
   }

}

然后在你的页面

<强> page.ts

import { Result } from 'path/to/your/model/folder/result/
data: Array<Result> = [];

loadUser(){
   this.http.get('assets/json/collection.json')
   .map(res => res.json())
   .subscribe(data => {
      this.data = data.results;
      console.log(data.results);
   });
}

修改

您还可以在订阅中设置每个Result对象，然后将它们推送到最终数组中。
重要事项：在ionViewWillEnter（）中调用loadUsers，因此每次进入页面时都会运行。

loadUsers() { let results = []; var i; this.http.get('assets/json/collection.json') .map(res => res.json()) .subscribe(data => { for(i=0; i< data.results.length;i++) { let result = new Result(); // add each attr to the result object // i.e. result.id = data.results[i].id //push the object to the final array results.push(result) } }) this.data = results; }

使用Angular加载本地JSON文件

2 个答案: