英文:
How to read data from JOSN file with Angular Observable
问题
I have a JSON file called reportConfig. I want to read that data using Angular and TypeScript.
Here I have added my JSON file:
{
"accessToken": "12345",
"style": "color",
"projection": "globe",
"zoomLevel": 5,
"markerScale": 1.1
}
and created a new class called ConfigModel:
export class MapReportConfigModel {
accessToken: string;
style: string;
projection: string;
zoomLevel: number;
markerScale: number;
constructor(private httpClient: HttpClient) {}
// Read JSON data
getMapConfig(): Observable<ReportConfigModel> {
let configData = `assets/reportConfig.json`;
return this.httpClient.get<ReportConfigModel>(configData);
}
}
Now I have a child component called ReportContainer. So my question is how can I call the getMapConfig() method from the child component:
export class ReportContainerComponent implements OnInit {
constructor(
private httpClient: HttpClient,
private mapReportConfigModel: MapReportConfigModel
) {}
ngOnInit(): void {}
// Load the initial map
loadMap(): void {
// Call the getMapConfig method
this.mapReportConfigModel.getMapConfig().subscribe(data => {
// Handle the JSON data here
console.log(data);
});
}
}
I have tried this but don't know how to implement it correctly. Could someone help me to resolve this? From the child component, I want to call this method to get JSON data.
英文:
I have a JSON file called reportConfig. I want read that data using angular and typescript.
Here I have added my JSON file
{
"accessToken": "12345",
"style": "color",
"projection": "globe",
"zoomLevel": 5
"markerScale": 1.1
}
and created new class called ConfigModel
export class MapReportConfigModel {
accesToken: string;
style: string;
projection: number;
zoomLevel: number;
markerScale: number;
constructor(private httpClient: HttpClient) {}
// read json data
getMapConfig(): Observable<ReportConfigModel > {
let configData = `assets/reportConfig.json`;
return this.httpClient.get<ReportConfigModel>(configData );
}
}
Now I have child component called ReportContainer. so my question is how can I call from child component to getMapConfig() method.
export class ReportContainerComponent implements OnInit {
constructor(
private httpClient: HttpClient,
private mapReportConfigModel: MapReportConfigModel
) {}
ngOnInit(): void {}
//load initial map
loadMap(): void {
}
private getMapConfigData(): void {
this.httpClient.get(this.mapReportConfigModel);
}
}
I have tried this but don't know how to implement in correctly.
Could someone can help me to resolve this. from child component I want to call this method to get json data.
答案1
得分: 0
所以我的问题是如何从子组件调用
getMapConfig()方法。
订阅从 getMapConfig 方法获取的 Observable，它位于 mapReportConfigModel 私有变量上。
export class ReportContainerComponent implements OnInit {
constructor(
private mapReportConfigModel: MapReportConfigModel
) {}
ngOnInit(): void {
// 从你的组件中调用依赖
this.mapReportConfigModel.getMapConfig().subscribe((result) => {
console.log(result);
});
}
}
英文:
> so my question is how can I call from child component to
> getMapConfig() method.
Subscribe to the Observable that you get from your getMapConfig method on the mapReportConfigModel private variable.
export class ReportContainerComponent implements OnInit {
constructor(
private mapReportConfigModel: MapReportConfigModel
) {}
ngOnInit(): void {
// Invoke the dependency from your component
this.mapReportConfigModel.getMapConfig().subscribe((result) => {
console.log(result);
});
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论