Angular 5服务读取 local.json 文件

我使用角度5，我已经创建了一个服务使用角度-cli

我想要做的是创建一个服务，读取本地 json 文件的角度5。

This is what I have ... I'm a bit stuck...

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));


}


}

我怎样才能完成这项工作？

233468 次浏览
小开
最佳答案

首先你必须注射 HttpClient而不是 HttpClientModule, 第二件事，你必须删除 .map((res:any) => res.json())，你不再需要它，因为新的 HttpClient会默认提供响应的主体，最后确保你在你的 AppModule导入 HttpClientModule :

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);
});
}
}
小开

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

要编译，请在 typeings.d.ts 文件中声明这个模块

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

在你的代码里

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


console.log(data_json)
小开

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

打电话给 require:

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

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

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

"compilerOptions": {
"types": ["node"],
...
},
...
小开 
import data  from './data.json';
export class AppComponent  {
json:any = data;
}

有关 更多细节，请参阅本文。

小开

For Angular 7, I followed these steps to directly import json data:

在 tsconfig.app.json 中:

add "resolveJsonModule": true in "compilerOptions"

在服务或组件中:

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

然后

private example = exampleData;
小开

试试这个

在您的服务中编写代码

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);
})
}
小开

让我们创建一个 JSON 文件，我们将其命名为 navbar.JSON，您可以对其进行任何命名！

Navbar Json

[
{
"href": "#",
"text": "Home",
"icon": ""
},
{
"href": "#",
"text": "Bundles",
"icon": "",
"children": [
{
"href": "#national",
"text": "National",
"icon": "assets/images/national.svg"
}
]
}
]

现在我们已经创建了一个带有一些菜单数据的 JSON 文件。我们将转到应用程序组件文件并粘贴下面的代码。

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';


@Component({
selector: 'lm-navbar',
templateUrl: './navbar.component.html'
})
export class NavbarComponent {
mainmenu:any = menudata;


}

现在，Angular 7应用程序已经准备好提供来自本地 JSON 文件的数据。

Go to app.component.html and paste the following code in it.

App.Component. html

<ul class="navbar-nav ml-auto">
<li class="nav-item" *ngFor="let menu of mainmenu">
<a class="nav-link" href="\{\{menu.href}}">\{\{menu.icon}} \{\{menu.text}}</a>
<ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0">
<li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="\{\{sub_menu.href}}"><img src="\{\{sub_menu.icon}}" class="nav-img" /> \{\{sub_menu.text}}</a></li>
</ul>
</li>
</ul>
小开

使用类型3.6.3和角度6，这些解决方案都不适合我。

是的的工作是遵循教程 给你，其中说，您需要添加一个名为 njson-typings.d.ts的小文件到您的项目，包含以下内容:

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

完成后，我可以简单地导入硬编码的 json 数据:

import employeeData from '../../assets/employees.json';

and use it in my component:

export class FetchDataComponent implements OnInit {
public employees: Employee[];


constructor() {
//  Load the data from a hardcoded .json file
this.employees = employeeData;
. . . .
}
小开

假设在项目的 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 Methods for Reading Local JSON Files

方法1: 使用 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: 使用角形 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 语句在脱机角度应用程序中读取本地 JSON 文件

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

但是首先我们需要添加一个如下输入文件:

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

Add this inside a new file json-typings.d.ts file in the src/app folder.

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

import * as data from "data.json";
小开

对我来说，当我试图导入数据文件时，它不起作用。相反，我已经将数据文件移动到资产文件夹，并尝试通过 get request 访问它。

 public getProjectTree()
{
return this.http.get("assets/data.json");
}

提交答案