在Angular 7中,可以使用HttpClient模块来加载和导入JSON文件。下面是一个解决方法的代码示例:
data.service.ts
的服务文件,该服务用于加载JSON文件:import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
loadData() {
return this.http.get('assets/data.json');
}
}
DataService
服务:import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
data: any;
constructor(private dataService: DataService) { }
ngOnInit() {
this.loadData();
}
loadData() {
this.dataService.loadData().subscribe(response => {
this.data = response;
console.log(this.data);
});
}
}
-
{{ item.name }}
在上面的代码中,data.json
文件应该放在src/assets
文件夹下。
注意:当你在Angular应用离线时加载JSON文件时,确保angular.json
文件中的assets
数组包含"src/assets"
的路径。