angular - 找不到不同的支持对象'响应状态：200

Question

我想从 github 恢复数据并显示这些数据，但它给了我错误。this.followers文件中的编辑器代码下划线github-followers.component.ts。

github-followers.component.ts

import { GithubFollowersService } from './../services/github-followers.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'github-followers',
  templateUrl: './github-followers.component.html',
  styleUrls: ['./github-followers.component.css']
})
export class GithubFollowersComponent implements OnInit {
  followers : any[];

  constructor(private service:GithubFollowersService) { }

  ngOnInit() {
    this.service.getAll()
    .subscribe(followers => this.followers = followers);
  }

}

github-followers.service.ts

import { Http } from '@angular/http';
import { DataService } from './data.service';
import { Injectable } from '@angular/core';



@Injectable({
  providedIn: 'root'
})
export class GithubFollowersService extends DataService {

  constructor(http:Http) {
    super('https://api.github.com/users/IDBRAHIMDEV/followers',http)
   }
}

数据服务.ts

import { BadInput } from './../common/bad-input';
import { AppError } from './../common/app-error';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import { NotFoundError } from '../common/not-found-error';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';



@Injectable({
  providedIn: 'root'
})
export class DataService {


  constructor(private url : string ,private http : Http) { }

  getAll(){
    return this.http.get(this.url).
    pipe(
      catchError(
        this.handleError
      )   
    )}

  create(resource){
    return this.http.post(this.url,resource).
    pipe(
      catchError(
        this.handleError
      )
    )

  }

  update(resource){
    return this.http.put(this.url,resource).
    pipe(
      catchError(
        this.handleError
      )
    )
  }

  delete(resource){
    return this.http.delete(this.url+'/'+resource.id).
    pipe(
      catchError(
        this.handleError
      )
    )

  }

    private handleError(error : Response){
      if(error.status===404){
        return throwError(new NotFoundError(error));
      }

      if(error.status===400){
        return throwError(new BadInput(error))
      }

      return throwError(new AppError(error))

    }
}

github-followers.component.html

<div *ngFor="let follower of followers" class="media">
    <div class="media-left">
        <a href="#">
            <img class="avatar media-object" src="{{ follower.avatar_url }}">
        </a>
    </div>
    <div class="media-body">
            <h4 class="media-heading">{{ follower.login }}</h4>
            <a href="follower.html_url">{{ follower.html_url }}</a>
        </div>
</div>

标签： angular

Answer 1

如果您使用 Angular 8 而不是：

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

你应该使用：

import { HttpClient, HttpHeaders } from '@angular/common/http';

但我认为您在响应有效负载中收到的对象不是数组。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { GithubFollowersComponent } from './components/github- 
followers/github-followers.component';
import { DataService } from './services/data.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent, 
  GithubFollowersComponent ],
  bootstrap:    [ AppComponent ],
  providers: [DataService]
})
export class AppModule { }

数据服务.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
...

constructor(private http: HttpClient) { }

getAll(){
  return 
this.http.get('https://api.github.com/users/IDBRAHIMDEV/followers').
pipe(map(response => response),
  catchError(
    this.handleError
  )   
)}
...

app.module.html

<github-followers></github-followers>

这里有一个工作演示：githubFollowersStackBlitz