將json數據加載到服務中並將其返回給組件

Question

我有一個組件及其控制器和模板。 我正在使用服務從json文件加載數據並將其返回到我的組件。 返回的數據應在組件模板內循環。 目前，我的服務中的console.log()向我顯示了正確的數據，因此它將從json文件加載所有內容。 我組件中的console.log()錯誤。 我知道，很少有問題的答案，但是它們並沒有幫助我。 異步加載有問題嗎？ 有任何想法嗎？ 我還在問題的底部附加了控制台錯誤。

test.json

[
  {
    "Id": 1,
    "Name": "Item 1"
  },
  {
    "Id": 2,
    "Name": "Item 2"
  },
  {
    "Id": 3,
    "Name": "Item 3"
  }
]

test.component.ts

import { Component, OnInit } from "@angular/core";
import { NavigationService } from "../../../services/navigation.service";

export type NavigationListModel = { Id: number; Name: string };

@Component({
  selector: "test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"]
})
export class TestComponent implements OnInit {
  navigationList: Array<NavigationListModel>;

  constructor(private _navService: NavigationService) {
    this.navigationList = this._navService.loadNavigationList();
    console.log(this.navigationList);
  }

  ngOnInit() {}
}

測試服務

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import 'rxjs/add/operator/map';


@Injectable()
export class NavigationService {
  constructor(private http: Http) {
  }

  loadNavigationList() {
    return this.http
      .get("/assets/mock/test/test.json")
      .map(data => data.json() as Array<NavigationService>)
      .subscribe(data => {
        console.log(data);
        return data;
      });
  }
}

test.component.html

<div *ngFor="let item of navigationList">
  {{item.Name}}
</div>

CONSOLE和CONSOLE.LOG（）結果中的錯誤：

Answer 1

當創建返回到HTTP並且異步的服務時，您需要在調用它的位置訂閱該函數。 如您所見，控制台日志告訴您這是訂閱。

嘗試：

this._navService.loadNavigationList().subscribe((data: any) => {
    console.log(data)
});

或者您可以重新創建將返回帶有解決和錯誤的新Promise的服務，我通常會這樣做

 loadNavigationList() {
    return new Promise((error, resolve) => {
     this.http
      .get("/assets/mock/test/test.json")
      .map(data => data.json() as Array<NavigationService>)
      .subscribe((data) => {
        // if api, check for errr
        if(data.code == 500) {
          error(something);
          return
        }
        resolve(data)
      });
    });
  }

你會在哪里稱呼它

loadNavigationList().then((data) => {

}, (err) => {

})

Answer 2

您正在遍歷navigationList字段，由於異步調用，該字段仍未定義（尚未收到響應）。

要解決此問題，您必須使您的loadNavigationList（）方法返回一個可觀察的Array，並在測試組件中與模板內的異步管道一起使用它：

test.service.ts：

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import 'rxjs/add/operator/map';


@Injectable()
export class NavigationService {
  constructor(private http: Http) {
  }

  loadNavigationList() {
    return this.http
      .get("/assets/mock/test/test.json")
      .map(data => data.json() as Array<NavigationService>);
  }
}

test.component.ts：

import { Component, OnInit } from "@angular/core";
import { NavigationService } from "../../../services/navigation.service";

export type NavigationListModel = { Id: number; Name: string };

@Component({
  selector: "test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"]
})
export class TestComponent implements OnInit {
  navigationListObservable$: Observable<Array<NavigationListModel>>;

  constructor(private _navService: NavigationService) {
    this.navigationList$ = this._navService.loadNavigationList();
  }

  ngOnInit() {}
}

test.component.html

<div *ngFor="let item of  (navigationListObservable$ | async)">
      {{item.Name}}
</div>