Question

我想从github API获取所有数据。但它对我不起作用。我的.ts文件如下：

import { Component } from '@angular/core';
import { GitTakeService } from "app/git-take.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user:any;

constructor(private gittakeService:GitTakeService ){

  this.gittakeService.getUser().subscribe(user=>{
    debugger;
    this.user=user;
    console.log(user);
  })

}
}

我的服务如下：

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

@Injectable()
export class GitTakeService {

  constructor(private http:Http) { }


  getUser(){
    debugger;
    return this.http.get("http://api.github.com/users")
        .map(
          (resp:Response)=>{

           return resp.json().response;
          }
        );    
  }    
}

在.ts文件中对用户进行控制时，显示未定义。我的视图文件是这样的：

有人请帮我解决这个问题吗？

Answer 1

您收到的内容是一个数组，因此您希望使用resp.json()代替resp.json().response，在您的回复中没有response这样的属性。所以你的地图应该是这样的：

getUser(){
  debugger;
  return this.http.get("http://api.github.com/users")
    .map((resp:Response)=>{
       return resp.json();
    });    
}

在我的组件中，我将数组命名为users而不是user，因为您的响应中有多个用户。另外，我建议您从构造函数中保留不必要的内容，并使用OnInit代替：

users = [];

constructor(private gittakeService:GitTakeService ){ }

ngOnInit() {
  this.gittakeService.getUser()
    .subscribe(data => {
       this.users = data;
    });
}

然后您可以迭代数组并使用属性名称来显示一个user对象的属性：

<div *ngFor="let user of users">
  {{user.login}}
</div>

Answer 2

resp.json().response未定义resp.json()是您想要的

服务功能：

getUser(){
   return this.http.get("http://api.github.com/users")
    .map(
      (resp:Response)=>{

       return resp.json();
      }
    );

}`

和组件：

this.gittakeService.getUser().subscribe(users=>{
    this.user=users[0];
    console.log(user);
})

从GITHUB API获取数据

{{用户}}

2 个答案: