在Angular2中从JSON获取数据不起作用

Question

我正在尝试从Angular 2的资产文件夹中的JSON文件中获取数据，但未显示。 我想从以下JSON文件中获取数据：

test.json

[
    "{'id': 1, 'building': 'Edificio 4', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 2, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 0, 'school': 1}",
    "{'id': 3, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 4, 'building': 'Edificio 2', 'zone': 'C', 'floor': 2, 'school': 2}",
    "{'id': 5, 'building': 'Edificio 2', 'zone': 'B', 'floor': 3, 'school': 2}",
    "{'id': 6, 'building': 'Edificio 7', 'zone': 'J', 'floor': 7, 'school': 2}"
]

我正在尝试执行的组件是这个组件：

locker.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

//this is the data class
class Place{
  constructor(public id: string, public building: string, public zone: string, public floor: string, public school: string) { }
}

@Component({
  selector: 'app-locker',
  template: `
  //here i have a template
`,
  styleUrls: ['./locker.component.css'],

})

@Injectable()
export class LockerComponent implements OnInit {

  places: Place[];
//if I manually add the data by hand here it works,
//I want to fetch the JSON data to this array

  campus: String;
  building: String;
  floor: String;
  zone: String;
  type: String;

  buildings = [];
  floors = [];
  zones = [];
  types = [];

  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.http.get('./assets/test.json').subscribe(data => {
    this.places = data;
    });
  }
}

如https://angular.io/guide/http中所述，我还在我的app.component.ts中导入了HttpClientModule。

我已经阅读了其他关于类似问题的stackoverflow答案，但它们似乎不起作用，并且答案有点模糊，因为它们不显示所有代码，而仅显示摘要。

有什么想法为什么不起作用？

我还在此处使用了我要根据另一个选择中的一个显示数据的函数：

onChangeCampus(event: any){
    const campus = event.target.value;
    this.buildings.length = 0;
    this.floors.length = 0;
    this.zones.length = 0;
    this.types.length = 0;
    for(let i of this.places){
      if (i.school == campus && !(this.buildings.indexOf(i.building) > -1)){
        this.buildings.push(i.building);
      }
    }
  }

Answer 1

您应该定义请求的返回值：

 this.http.get<Place[]>('./assets/test.json').subscribe(data => {
   this.places = data;
 });

Answer 2

您可以通过httpClient模块调用json文件，方法是：

getFile():Observable<Object>{
    return this.http.get('http://localhost:4200/assets/file.json');
}

并且必须将文件保留在Assets文件夹中，以便可以访问它。 我希望这会有所帮助。

Answer 3

就像卢卡斯（Lucas）提出的那样，您的第一个问题就是返回值类型

this.http.get<Place[]>('./assets/test.json').subscribe(data => {
   this.places = data;
 });

我相信您的test.json格式也差不多。

[
    "{'id': 1, 'building': 'Edificio 4', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 2, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 0, 'school': 1}",
    "{'id': 3, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 4, 'building': 'Edificio 2', 'zone': 'C', 'floor': 2, 'school': 2}",
    "{'id': 5, 'building': 'Edificio 2', 'zone': 'B', 'floor': 3, 'school': 2}",
    "{'id': 6, 'building': 'Edificio 7', 'zone': 'J', 'floor': 7, 'school': 2}"
]

什么时候应该是这样的。 我删除了包装的“标记”，并将“更改为”标记

[
  {"id": 1, "building": "Edificio4", "zone": "Sin zonas", "floor": 1, "school": 1},
  {"id": 2, "building": "Edificio15", "zone": "Sin zonas", "floor": 0, "school": 1},
  {"id": 3, "building": "Edificio15", "zone": "Sin zonas", "floor": 1, "school": 1},
  {"id": 4, "building": "Edificio2", "zone": "C", "floor": 2, "school": 2},
  {"id": 5, "building": "Edificio2", "zone": "B", "floor": 3, "school": 2},
  {"id": 6, "building": "Edificio7", "zone": "J", "floor": 7, "school": 2}
]