Angular 5 Service读取本地.json文件

Question

我正在使用Angular 5,我使用angular-cli创建了一个服务

我想要做的是创建一个服务,读取Angular 5的本地json文件.

这就是我的......我有点卡住......

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

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

我怎么能完成这个？

Answer 1

首先,你必须注入HttpClient和不HttpClientModule,你必须删除第二件事.map((res:any) => res.json()),你将不再需要它了,因为新HttpClient会给你默认响应的身体,最后确保你输入HttpClientModule你的AppModule :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

将其添加到您的组件:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Answer 2

您有另一种解决方案,直接导入您的json.

要编译,请在typings.d.ts文件中声明此模块

declare module "*.json" {
    const value: any;
    export default value;
}

在你的代码中

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Answer 3

假设您的项目的 src/app 文件夹中有一个 data.json 文件，其中包含以下值：

[
    {
        "id": 1,
        "name": "Licensed Frozen Hat",
        "description": "Incidunt et magni est ut.",
        "price": "170.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 56840
    },
    ...
]

3种读取本地JSON文件的方法

方法一：使用TypeScript 2.9+ import语句读取本地JSON文件

import { Component, OnInit } from '@angular/core';
import * as data from './data.json';

@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';

  products: any = (data as any).default;

  constructor(){}
  ngOnInit(){
    console.log(data);
  }
}

方法2：使用Angular HttpClient读取本地JSON文件

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';
  products: any = [];

  constructor(private httpClient: HttpClient){}
  ngOnInit(){
    this.httpClient.get("assets/data.json").subscribe(data =>{
      console.log(data);
      this.products = data;
    })
  }
}

方法 3：使用 ES6+ import 语句在离线 Angular 应用程序中读取本地 JSON 文件

如果您的 Angular 应用程序离线，则使用 HttpClient 读取 JSON 文件将失败。在这种情况下，我们还有一种方法可以使用支持导入 JSON 文件的 ES6+ import 语句来导入本地 JSON 文件。

但首先我们需要添加一个键入文件，如下所示：

declare module "*.json" {
  const value: any;
  export default value;
}

json-typings.d.ts将其添加到src/app 文件夹中的新文件中。

现在，您可以像 TypeScript 2.9+ 一样导入 JSON 文件。

import * as data from "data.json";

Answer 4

对于Angular 7，我按照以下步骤直接导入json数据：

在tsconfig.app.json中：

添加"resolveJsonModule": true在"compilerOptions"

在服务或组件中：

import * as exampleData from '../example.json';

然后

private example = exampleData;

Answer 5

在寻找真正读取本地文件而不是从Web服务器读取文件的方法时,我发现了这个问题,我宁愿称之为"远程文件".

只需致电require:

const content = require('../../path_of_your.json');

Angular-CLI源代码启发了我:我发现它们通过替换templateUrl属性包含组件模板,template通过require调用实际HTML资源来包含值.

如果使用AOT编译器,则必须通过调整tsconfig.app.json以下命令来添加节点类型定义:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

Answer 6

尝试这个

在您的服务中编写代码

import {Observable, of} from 'rxjs';

导入 json 文件

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

在组件中

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Answer 7

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

有关更多详细信息，请参见本文。