1

Есть 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 в коде компонента? Спасибо.

2
  • А можно посмотреть код присвоения? В каком месте это происходит? 16 окт 2019 в 5:35
  • @SergeyRogachev, например такой код, который будет в компоненте testzone.component.ts - this.imgnum=this.pageParams[0]["imgNumber"]; this.param = this.imgnum * 5; и далее переменную param вывожу в шаблоне testzone.component.html.
    – Alex Slav
    28 окт 2019 в 23:04

1 ответ 1

0

Судя по всему, Вы хотели сделать так:

ngOnInit() {   
    this.imgcaruselService.getPagesJson().subscribe(data => {
        this.pageParams=data["pagesList"];
        this.imgnum=this.pageParams[0]["imgNumber"];
        this.param = this.imgnum * 5;
    });    
}

Как только вы получите ответ, Вы сможете проинициализировать данные и они обновятся на форме

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.