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>

這是一個

演示

如前所述，這是提供另一種方法來實現您想要實現的目標，這可能是我的首選方式:)