javascript - 从 GITHUB API 获取数据

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文件中安慰用户时，显示未定义。我的 View 文件是这样的:

{{用户}}

谁能帮我解决这个问题吗？

Answer 1

您收到的是一个数组，因此您想使用 resp.json() 而不是 resp.json().response 没有这样的属性您的回复中的response。所以你的 map 应该是这样的:

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;
    });
}

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

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