data.json

[ 
 {
    "Date" : "10/09/2017",
    "ID" : "1",
    "Color" : "Orange",
  }, {
    "Date" : "10/11/2017",
    "ID" : "2",
    "Color" : "Green",
  }
]

我为那个读取数据的服务创建了一个服务，它将它存储在JSON格式的数据变量中。将JSON文件保存在assets文件夹中非常重要，因为它可以轻松访问。

data.service.ts

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

@Injectable()
export class DataService {

  constructor(private http: Http) {   }

  fetchData() {
    return this.http.get('assets/data/data.json').map(
      (Response)=>Response.json()
    ).subscribe(
      (data) => {
        console.log(data);
      }

    );
  }

}

上述服务正常运行并在控制台中显示JSON数据。现在

data.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../../services/data.service';
import { DataTablesModule } from 'angular-datatables';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {

  constructor(private DataResponse: DataService ) { }

  ngOnInit() {
    this.DataResponse.fetchData();
  }

}

它在控制台中显示JSON数据，但如何以HTML格式显示数据。我尝试了不同的方法，但对我没什么用。

如果我找到任何解决方案，我会更新问题。如果有人已经知道如何解决这个问题，我将非常高兴。

Answer 1

而不是在服务中订阅，在组件内部订阅。在服务中返回observable。

 fetchData() {
    return this.http.get('assets/data/data.json').map(
      (Response)=>Response.json()
    )
  }

现在，在组件内部订阅并将data变量绑定到HTML

export class DataComponent implements OnInit {
  data:any;

  constructor(private DataResponse: DataService ) { }

  ngOnInit() {
    this.DataResponse.fetchData().subscribe(
      (data) => {
       this.data = data;
      }

     );
    };
  }

}

Answer 2

您提供的JSON文件是无效的JSON格式。与JavaScript数组和对象不同，您不能在最后的项目中使用尾随逗号。

应该是：

[ 
 {
    "Date" : "10/09/2017",
    "ID" : "1",
    "Color" : "Orange"
  }, {
    "Date" : "10/11/2017",
    "ID" : "2",
    "Color" : "Green"
  }
]

如何从角度4的JSON文件中获取json数据

data.json

data.service.ts

data.component.ts

2 个答案: