无法在浏览器中显示本地json文件中的数据

Question

我希望在浏览器中显示JSON数据，以便模型、提供者、存储和条件在单独的div中显示。控制台中没有错误，我也不知道问题出在哪里。链接更新为stackblitz，请查看它。

Github回购

这里是stackblitz的链接。

iphone.json

{
"model": [
    "iPhone 5",
    "iPhone 5s",
    "iPhone SE"
],
"provider": [
    "Unlocked",
    "AT&T"
],
"storage": [
    "16",
    "32"
],
"condition": [
    "Brand New",
    "Mint"
] 
}

sell.service.ts

import { Injectable } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { Http, Response } from "@angular/http";
import { HttpClient} from '@angular/common/http';

import "rxjs/add/operator/map";

export interface Staticdata {
  model: Array<Model>;
  provider: Array<Provider>;
  storage: Array<Storage>;
  condition: Array<Condition>;
}

export interface Model {
  name: string;
}

export interface Provider {
  carrier: string;
 }

 export interface Storage {
   size: number;
 }

 export interface Condition {
   quality: string;
 }

 @Injectable()
 export class SellService {
  fileUrl = '../static-data/iphone.json';
  constructor(public http:HttpClient) {}

  getData(){
   return this.http.get(this.fileUrl);
   }

  }

sell-iphone.component.ts

import { Component, OnInit } from '@angular/core';
import { SellService, Staticdata } from "../shared/sell.service";
import * as data from "../static-data/iphone.json";

@Component({
  selector: 'app-sell-iphone',
  templateUrl: './sell-iphone.component.html',
  styleUrls: ['./sell-iphone.component.css'],
  providers: [ SellService ]
})
export class SellIphoneComponent implements OnInit {

  constructor(public sellService: SellService){
  }

  ngOnInit() {}

  staticData : Staticdata;
  showData(){
    return this.sellService.getData().subscribe((data: Staticdata) => this.staticData = {
      model: data.model,
      provider: data.provider,
      storage: data.storage,
      condition: data.condition
    });
    }

}

Answer 1

你的儿子一定是：

    {
    "model": [
        {
            "name": "iPhone 5"
        },
        {
            "name": "iPhone 5s"
        },
        {
            "name": "iPhone SE"
        }
    ],
    "provider": [
        {
            "carrier": "Unlocked"
        },
        {
            "carrier": "AT&T"
        }
    ],
    "storage": [
        {
            "size": "16"
        },
        {
            "size": "32"
        }
    ],
    "condition": [
        {
            "quality": "Brand New"
        },
        {
            "quality": "Mint"
        }
    ]
}

或者你必须转换你收到的数据。您可以在服务中做得比在组件中做得更好。

getData(){
   return this.http.get(this.fileUrl).pipe(map((res:any)=>{
     return {
        model:res.model.map(m=>{return {name:m}}),
        provider:res.provider.map(p=>{return{carrier:p}}),
        storage:res.storage.map(s=>{return{size:s}}),
        condition:res.condition.map(c=>{return{quality:c}})
     }
   })
  );
}

如果您使用的是角-cli，则必须将您的file.json放在“资产”文件夹中。