假设,您的项目的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文件的方法
方法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:使用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;
})
}
}
方法三:使用 ES6+ import 语句在离线 Angular 应用中读取本地 JSON 文件
如果您的 Angular 应用程序离线,使用 HttpClient 读取 JSON 文件将失败。在这种情况下,我们还有一种方法可以使用支持导入 JSON 文件的 ES6+ import 语句来导入本地 JSON 文件。
但首先,我们需要添加一个类型文件,如下所示:
declare module "*.json" {
const value: any;
export default value;
}
将以下代码添加到src/app文件夹下的新文件json-typings.d.ts
中。
现在,您可以像TypeScript 2.9+一样导入JSON文件。
import * as data from "data.json";
HttpClientModule
不应该在构造函数中注入。 - AT82