Angular 5 Service 读取本地 .json 文件

IT技术 javascript json angular
2021-02-04 19:44:23

我正在使用 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));

  }

}

我怎样才能完成这个？

6个回答

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

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

@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);
        });
   }
}
我得到“未解析的类型 Observable”......在这一行“public getJSON(): Observable<any> {”
2021-03-17 19:44:23
最后一个问题......我如何从我的组件中获取这些数据？
2021-04-04 19:44:23
假设我想读取 json id。我必须做什么？如果您不介意，请提供示例。
2021-04-04 19:44:23
我收到带有日志的 404 GET http://localhost:4200/src/assets/data.json 404 (Not Found)
2021-04-09 19:44:23
我在获取 json 文件时遇到了 404 错误......并且也像你一样遵循相同的流程......
2021-04-11 19:44:23

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

在 tsconfig.app.json 中：

添加"resolveJsonModule": true在"compilerOptions"

在服务或组件中：

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

接着

private example = exampleData;

您有一个替代解决方案，直接导入您的 json。

要编译，请在typings.d.ts 文件中声明此module 

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

在你的代码中

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

console.log(data_json)
只需在typing.d.ts 文件中声明module。并将您的 JSON 导入您的课程
2021-03-18 19:44:23
哪个module？假设我在应用程序中使用它。module。ts？
2021-03-26 19:44:23
假设，我在 assets/abc.json 中有我的 json，并且只使用一个module app.module.ts 然后如何在 Typing.d.ts 中声明以及如何导入。请帮忙。
2021-03-28 19:44:23
当我这样做时，我让它可以正常工作 import { default as data_json } from '../../path_of_your.json';
2021-03-30 19:44:23
为什么我在控制台中得到“未定义”？
2021-04-07 19:44:23

我在寻找一种真正读取本地文件而不是从 Web 服务器读取文件的方法时发现了这个问题，我宁愿将其称为“远程文件”。

只需致电require：

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

Angular-CLI 源代码启发了我：我发现它们包含组件模板，方法是通过调用实际的 HTML 资源来替换templateUrl属性template和值require。

如果您使用 AOT 编译器，则必须通过调整来添加节点类型定义tsconfig.app.json：

"compilerOptions": {
  "types": ["node"],
  ...
},
...
所有这些解决方案都很棒，但这是唯一允许我保存值并动态解析文件内容而无需初始导入的解决方案之一
2021-03-18 19:44:23
要使用，require我需要按照此处讨论的@types/node方式运行安装npm install @types/node --save-dev
2021-04-10 19:44:23 
import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

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

对于我的本地文件，这是最容易使用的。我不得不添加"allowSyntheticDefaultImports": true到我的 tsconfig.json 'compilerOptions'，但只是为了停止 TypeScript 的 linting 错误，而不是实际错误。
2021-03-22 19:44:23
这是解决方案：hackeruna.com/2020/04/27/...对于此错误 TS1259
2021-04-11 19:44:23
其它你可能感兴趣的问题
上一篇window.localStorage 与 chrome.storage.local 下一篇实体名称必须紧跟在实体引用中的“&”之后