在 Angular 中读取 JSON 数据并在 GUI 上显示答案

【问题标题】：Reading JSON data and display on GUI in Angular在 Angular 中读取 JSON 数据并在 GUI 上显示
【发布时间】：2019-06-23 21:49:33
【问题描述】：

我正在使用 Angular 应用程序，我正在尝试从我的 Json 文件中读取数据并将其显示在 GUI 上。我成功地从 json 文件中读取数据，并且可以在我的 GUI 控制台中看到我的对象和数据。但我不知道如何在 GUI 上显示所需的数据。

我的服务类如下：

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>

即使我使用的是配方 url，也会显示来自 app.component.html。

【问题讨论】：

标签： angular angular6 angular7 angular8

【解决方案1】：

我尝试重现您的代码

HTML

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

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

【讨论】：

为什么要做settings.service？
这是我为其他目的服务
代码运行成功，但在 GUI 中我只能看到“主屏幕工作”，但我想要“食谱详细信息工作”仍然不可见
如果显示主屏幕有效，您是否希望隐形食谱详细信息有效？
我看不到您的更新。好吧，我也更新了问题以供您理解

【解决方案2】：

好的，您忘记将查询结果保存在您的类 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>

我认为应该可以。

【讨论】：