在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}
]