Angular 中的异步数据处理

Question

我正在尝试将本地 JSON 加载到我的组件中，但我无法将服务中的值加载到我的组件中。我可以在服务中看到 json 数据，但它在我的组件中未定义。有人看到我在这里做错了吗？谢谢。

这是console.log在服务和组件中的SS

interfaces.json

{
  "interfaces": {
    "eth" : {"name" : "eth"},
    "lte" : {"name" : "lte"},
    "wlc" : {"name" : "wlc"},
    "wlap" : {"name" : "wlap"}
  }
}

interfaces.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class Interfaces {

  constructor(public http: Http) {};

  public getData() {
    return this.http.get('/assets/interfaces.json')
    .map((res) => {res.json(); console.log(res); });
  };
}

interfaces.component.ts

import { Component, OnInit } from '@angular/core';
import { Interfaces } from './interfaces.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'interfaces',
  providers: [
    Interfaces
  ],
  template: `
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li *ngFor="let interface of interfaces | async" role="menuitem">
        <a [routerLink]=" ['./interfaces/eth'] "routerLinkActive="active"
        [routerLinkActiveOptions]= "{exact: true}" class="dropdown-item" href="#">
        {{interface.name}}Main Ethernet
        </a>
      </li>
    </ul>
  `,
})

export class InterfacesComponent implements OnInit {

  constructor(public interfaces: Interfaces) {}

  public ngOnInit() {
    this.interfaces.getData().subscribe((data) => { this.data = data; console.log(data); });

  }
}

Answer 1

它是undefined 的原因是您没有在map 内返回您的响应，而不是地图不起作用..

.map((res) => {console.log(res); return res.json(); }); // missing return here

或不带括号：

.map((res) => res.json());

Answer 2

我不知道有什么问题，因为我是 angular2 的新手，但这对我有用。

interfaces.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class Interfaces {

  constructor(public http: Http) {};

  public getData() {
    return this.http.get('/assets/interfaces.json');
  }
}

interfaces.component.ts

import { Component, OnInit } from '@angular/core';
import { Interfaces } from './interfaces.service';
import { Observable } from 'rxjs/Rx';

export class InterfacesComponent implements OnInit {

  constructor(public interfaces: Interfaces) {}

  public ngOnInit() {
    this.interfaces.getData().subscribe((data) => {
          this.data = data;
          console.log(data);
    });
  }
}