Есть json файл с таким содержимым:
{
"pagesList":
[
{
"pageUrl": "index",
"imgUrl": "glavnaya",
"imgNumber": 17
},
{
"pageUrl": "second",
"imgUrl": "secondimg",
"imgNumber": 10
}
]
}
Для дальнейшей обработки в коде компонента мне нужно получить число 17 (из строки "imgNumber": 17) в виде переменной. При этом выводить это значение в шаблон не требуется.
Вытаскиваю данные из json с помощью сервиса img-carusel.service.ts
:
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');
}
}
Далее в компоненте преобразую json в массив объектов Pages :
testzone.component.ts
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 [] = [];
imgnum:number;
constructor(private imgcaruselService: ImgCaruselService) {
}
ngOnInit() {
this.imgcaruselService.getPagesJson().subscribe(data => this.pageParams=data["pagesList"]);
}
//this.imgnum=this.pageParams[0]["imgNumber"];
}
pages.ts
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": "rafting", "imgUrl": "rafting", "imgNumber": 10 } ]
pageParam2 = glavnaya
imgUrl = glavnaya
pageUrl = index
imgNumber = 17
imgUrl = rafting
pageUrl = rafting
imgNumber = 10
Т.е. в шаблоне могу выводить любые значения из json файла, все ок.
Теперь пробую в компоненте присвоить переменной imgnum
нужное мне значение из массива объектов imgnum=this.pageParams[0]["imgNumber"];
. При перезагрузке страницы в браузере выводится пустой экран.
Как получить доступ к конкретным данным из json в коде компонента? Спасибо.
testzone.component.ts
-this.imgnum=this.pageParams[0]["imgNumber"]; this.param = this.imgnum * 5;
и далее переменнуюparam
вывожу в шаблонеtestzone.component.html
.