Question

我正在使用角度应用程序，并且尝试从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>

我可以在屏幕上的段落标签中看到文本，我试图在screeen上获取数据，但这种方法不起作用。

我每次都能看到

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

即使我正在使用配方网址，也会显示来自app.component.html的

。

Answer 1

我尝试重现您的代码

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

Answer 2

好的，您忘记了将查询结果保存在类ReservationDetailsComponent的属性中。因此，请尝试以下操作：

softmax = 1/(1+np.exp(-value))

在您的html文件中，替换

export class ReservationDetailsComponent implements OnInit {

 private json;

  constructor(private reservationService:ServiceService) {

  }

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

作者：

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

我认为它应该起作用。

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

2 个答案: