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

data.service.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>

Answer 1

如果您使用Angular 8代替：

  private void HoeveelheidTextBox_TextChanged(object sender, EventArgs e) {
    if (int.TryParse(hoeveelheidTextBox.Text, out int value)) {
      // TryParse succeeded; hoeveelheidTextBox.Text has an integer value
      // Let's check what the value is
      if (42 < value) {
        // hoeveelheidTextBox.Text has an integer value that exceeds 42
        MessageBox.Show("je kan niet schoenen erbij doen");

        hoeveelheidTextBox.Text = "";
      }
      else {
        // hoeveelheidTextBox.Text has an integer value which is 42 or below it
      }
    }
    else { // TryParse failed; 
      // hoeveelheidTextBox.Text doesn't have an integer value 
      // (it can be an empty string, "bla-bla-bla" etc.)
      hoeveelheidTextBox.Text = ""; 
    } 
  }

您应该使用：

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

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

app.module.ts

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

data.service.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 { }

app.module.html

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

下面是一个有效的演示：githubFollowersStackBlitz

Answer 2

此错误表示您要遍历对象而不是数组。

验证响应并查看其结构，然后使用正确的属性进行迭代。

找不到其他支持对象“状态为200的响应

2 个答案: