Angular 4 - 映射HTTP JSON响应

时间:2017-10-05 13:05:50

标签: json angular

我正在尝试设置一个平均堆栈crud应用程序。使用邮递员设置和测试路线和功能。我得到了所有路线的正确答复。现在我正在尝试添加视图部分,其中Angular应用程序在内部调用路径。我正在尝试设置一个基本的获取路线。以下是我的组件代码:

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  users: {};
  constructor(private userService: UserService) { }
  ngOnInit() {
    this.getUsers();
  }
  getUsers() {
    this.userService.getAllUsers().subscribe(data => this.users = data);
  }
}

,该服务包含以下代码:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';    
@Injectable()
export class UserService {    
  constructor(private http: Http) { }    
  getAllUsers() {
    this.http.get('/api/users')
      .map(res => res.json());
  }    
}

使用邮递员的路线样本响应如下:

{
    "status": true,
    "err": null,
    "data": [
        {
            "_id": "59d5db344c46e83a14b94616",
            "name": "test"
        },
        {
            "_id": "59d5db3c4c46e83a14b94617",
            "name": "hello"
        }
    ]
}

它总是告诉我以下错误: Property 'subscribe' does not exist on type 'void'.

我做错了什么?有人能指出我这样做的标准方法吗?

1 个答案:

答案 0 :(得分:2)

试试这个:

您忘了返回getAllUsers()

getAllUsers() {
   return this.http.get('/api/users')
      .map(res => res.json());
  }