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() {}
}

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>)
      .subscribe(data => {
        console.log(data);
        return data;
      });
  }
}

test.component.html

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

控制台中的错误和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>

在服务中加载json数据并将其返回到组件

2 个答案: