Angular 2-使用/显示通过HTTP获取或模拟的JSON数据

Question

我正在使用Angular 2应用程序，并且尝试使用本地/模拟或通过HTTP获取的JSON数据，并将其显示在组件上。 我有一个可注射的服务，可以进行提取/模拟-

import { Injectable } from 'angular2/core';

@Injectable()
export class TestService {
  testString:string = "";
  testDetails: string = "";

  constructor() { }

  getTestDetails(): Promise<string> {
    this.testDetails = {
      "status": "success",
      "message": "Data save successful",
      "data": {
        "Random_Data_1": "Random Data 1",
        "Random_Data_2": "Random Data 2"
      }
    };
    return Promise.resolve(JSON.stringify(this.propertyDetails));
  }
}

然后我有一个通过依赖注入使用服务的组件-

import { Component, OnInit } from 'angular2/core';
import {TestService} from "./test.service";

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: []
})
export class TestComponent implements OnInit {
  testDetails: string = "";

  constructor(private testService: TestService) { }

  ngOnInit() {
    this.display();
  }

  display(): void {
    this.testService.getTestDetails()
      .then(
        testDetails => {
          this.testDetails = JSON.parse(testDetails);
        },
        errorMessage => {
          console.error("Something failed trying to get test details");
          console.error(errorMessage);
        }
      );
  }
}

组件HTML-

<div class="content">
  <p> Test Details </p>
  <p> {{ testDetails.data.Random_Data_1 }} </p>
</div>

问题是，HTML尝试在testDetails JSON中显示项目时出错。 我最初将它与md-tabs一起使用，因此第一次尝试会出错，但是其他选项卡会很好地读取数据。 此外，发生错误时，将两次调用ngOnInit。 我将其范围缩小到输入的数据和导致我头痛的对象类型。

我知道我可以创建一个Details类并声明类型为Details的testDetails，然后将JSON数据映射到该类中，但事实是，我想使用通用数据，并且只知道其中的一些组件。数据。 有没有一种方法可以读取JSON和使用数据，而不必为每种情况定义一个单独的类？

我有一个最基本的东西设置的朋克。 实际的设置在我的本地系统上运行良好，直到尝试访问HTML中的JSON数据为止，此时浏览器引发了一个神秘的错误。 框架代码甚至无法在Plunker上运行。 也就是说，Plunker中的结构定义了我的应用程序的结构和数据流。 基本设置的柱塞

实现此目标的最佳方法是什么？ 这样做的标准/最佳实践是什么？

Answer 1

采用

<p *ngIF="testDetails.data.Random_Data_1 "> {{ testDetails.data.Random_Data_1 }} </p>

这是因为最初没有数据。希望对您有帮助。

Answer 2

因为您询问实现此目标的最佳方法 ，所以这里还有其他选择。 可能不是最好的主意，这是主观的；）但是，如果我是你...

考虑到未来，您将在哪里使用真正的后端，所以可以使用模拟json文件。 如果/当您移至真正的后端时，除了请求的URL之外，您基本上不需要更改其他任何内容：）

因此，我为您建立了一个简单的示例。 在这里，我使用了Observables，但如果愿意，可以使用Promises。 如果您想/需要阅读有关HTTP的更多信息，请参见这里。 最重要的是，您已在应用程序模块中导入了HttpModule 。

您的文件带有JSON，并在服务中对此进行了HTTP请求：

getTestDetails() {
  return this.http.get('src/data.json')
    .map(res => res.json())
}

您的显示方法：

display() {
  this.testService.getTestDetails()
    .subscribe(data => {
      this.testDetails = data;
    });
}

并在模板中使用安全导航运算符来保护null / undefined值：

<div class="content">
  <p> Test Details </p>
  <p> {{ testDetails?.data?.Random_Data_1 }} </p>
</div>

这是一个

演示

如前所述，这是提供另一种方法来实现您想要实现的目标，这可能是我的首选方式:)