json - 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 不工作..

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

或不带括号:

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