如何从 JSON 文件中获取一个值以在组件代码 Angular 2 (8.2.8) 中使用它?

Question

我的 JSON 文件是：

{
"pagesList":
[
{
"pageUrl": "index",
"imgUrl": "glavnaya",
"imgNumber": 17
},
{
"pageUrl": "second",
"imgUrl": "secondimg",
"imgNumber": 10
}      
]
}

对于下一步操作，我需要获取值 17(来自"imgNumber"：17(作为组件代码中的变量。但我不需要在模板中使用此变量，只需在组件代码中。使用img-carusel.service.ts从 json 文件获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ImgCaruselService {
constructor(private http: HttpClient) { }
getPagesJson() {
return this.http.get('/assets/from-server/pages.json');
}
}

之后，在组件testzone.component.ts中，我将json转换为对象数组：

import { Component, OnInit } from '@angular/core';
import { ImgCaruselService } from '../img-carusel.service';
import {Pages} from '../pages';
@Component({
selector: 'app-testzone',
templateUrl: './testzone.component.html',
styleUrls: ['./testzone.component.css'],
providers: [ImgCaruselService]  
})
export class TestzoneComponent implements OnInit {
pageParams:Pages [] = [];
constructor(private imgcaruselService: ImgCaruselService) {   
}
ngOnInit() {   
this.imgcaruselService.getPagesJson().subscribe(data => this.pageParams=data["pagesList"]);    
}

//imgnum=this.pageParams[0]["imgNumber"];
}

并为此使用类Pages：

export class Pages {
pageUrl: string;
imgUrl:string;
imgNumber: number;
}

并通过模板在屏幕上显示它testzone.component.html：

pageParams = {{pageParams|json}}
pageParams[0].imgUrl = {{pageParams[0]?.imgUrl}}
<ul *ngFor="let item of pageParams">
<li>imgUrl = {{item?.imgUrl}}</li>
<li>pageUrl = {{item?.pageUrl}}</li>
<li>imgNumber = {{item?.imgNumber}}</li>
</ul>

结果我得到了：

pageParam = [ { "pageUrl": "index", "imgUrl": "glavnaya", "imgNumber": 17 }, { "pageUrl": "second", "imgUrl": "secondimg", "imgNumber": 10 } ]
pageParam2 = glavnaya
imgUrl = glavnaya
pageUrl = index
imgNumber = 17
imgUrl = second
pageUrl = secondimg
imgNumber = 10

所以在模板中，我可以从 json 文件中输出所有值，没问题。之后，我尝试通过组件代码中的新变量分配值 17(来自"imgNumber"：17(：imgnum=this.pageParams[0]["imgNumber"];希望随后使用它。浏览器刷新后，我的屏幕干净，没有任何东西。没有关于 IDE 错误的消息，只有干净的屏幕。

我如何通过在组件代码中使用它而不是在 temlate 中输出来访问单独的数据？感谢您的回答。

Answer 1

所以我建议使用 httpclient 方法的 http.get 重载。

所以而不是

return this.http.get('/assets/from-server/pages.json');

用

return this.http.get<Pages[]>('/assets/from-server/pages.json');

否则

而不是

this.imgcaruselService.getPagesJson().subscribe(data => this.pageParams=data["pagesList"]);    

用

this.imgcaruselService.getPagesJson().subscribe(data => this.pageParams= JSON.parse(data["pagesList"]));