Чтение данных JSON и отображение на графическом интерфейсе в Angular - PullRequest
Новая
       31

Чтение данных JSON и отображение на графическом интерфейсе в Angular

0 голосов
/ 23 июня 2019

Я работаю в угловом приложении и пытаюсь прочитать данные из моего файла Json и отобразить их в графическом интерфейсе.Я успешно читаю данные из файла json и вижу свой объект с данными в консоли моего графического интерфейса.Но я не понимаю, как отобразить необходимые данные в графическом интерфейсе.

Мой класс обслуживания выглядит следующим образом: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RecipeService {

 // constructor() { }

 constructor(private http: HttpClient) {
  this.getJSON().subscribe(data => {
      console.log(data);
  });
}

public getJSON(): Observable<any> {
  return this.http.get("./assets/locale/en.json");
}
}

Мой код компонента выглядит следующим образом: * 

export class ReservationDetailsComponent implements OnInit {

 // lang$: Observable<string>;

  constructor(private reservationService:ServiceService) {

  }

  ngOnInit() {
    this.reservationService.getJSON().subscribe(data => {
      console.log(data);
  });
  }

Мой en.json выглядит следующим образом: 

{
    "SCREENS": {
        "HOME": {
            "TITLE": "Home Screen works"
        },        
        "DETAILS": {
            "TITLE": "Recipe Details works!"
        }
   }
}

В консоли моего приложения я могу видеть данные en.json как объект, но я хочу отобразить детали рецепта на экране, которые я не могу сделать.Пожалуйста, помогите мне отобразить его.

В моем HTML-файле мой код выглядит следующим образом: 

<div class="container">
  <h1 class="title">
    {{ 'SCREENS.DETAILS.TITLE' | translate }} 
  </h1>
</div>
<p>recipe details screen</p>

Я вижу текст в теге абзаца на экране, и я пытался получить данные на экранечто-то вроде этого, но это не работает.

Я вижу каждый раз, когда отображается 

<app-header></app-header>
<h1 style="text-align: center;">
   {{ 'SCREENS.HOME.TITLE' | translate }} 
</h1>

из app.component.html, даже если я использую URL рецепта.

Ответы [ 2 ]

1 голос
/ 23 июня 2019

Я пытался воспроизвести ваш код

HTML 

  <div class="container">
  <h1 class="title">
    {{ data.SCREENS.HOME.TITLE }} 
  </h1>
</div>
<p> {{ data.SCREENS.DETAILS.TITLE }} </p>

TS 

ngOnInit() {
    this.config.getData()
      .subscribe((data: any) => {
        this.data = data;
      });
  }

Служба JSON 

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
  getData() {
    return this.http.get('/assets/config.json');
  }
}

Демо https://stackblitz.com/edit/display-json-file?file=src/app/app.component.ts

0 голосов
/ 23 июня 2019

Хорошо, вы забыли сохранить результаты вашего запроса в атрибуте вашего класса ReservationDetailsComponent.Итак, попробуйте это: 

export class ReservationDetailsComponent implements OnInit {

 private json;

  constructor(private reservationService:ServiceService) {

  }

  ngOnInit() {
    this.updateJson();
  }
  updateJson(){
        this.config.getData()
      .subscribe((data: any) => {
        this.json= data;
      });
  }
}

И в вашем html файле замените 

<h1 class="title">
    {{ 'SCREENS.DETAILS.TITLE' | translate }} 
  </h1>

на: 

<h1 class="title">
    {{ json.SCREENS.DETAILS.TITLE }} 
  </h1>

Я думаю, это должно работать.

...