Angulaire 4 Service observable ne fonctionnant pas pour une API http get

Question

Angular 4 Service observable ne fonctionnant pas pour une API http.

Le http qui renvoie un observable ne semble pas fonctionner.

J'utilise la nouvelle HttpClient

Ceci est l'erreur que je reçois:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Solution?

It doesn't seem to like Observable going to the ngFor. Maybe I need to do a switchMap? in the component.

Ceci est mon appel de service http:

import { Injectable } from "@angular/core"; 
import { HttpClient } from "@angular/common/http"; 
import { Observable } from "rxjs/Observable"; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/retry'; 

import { User } from "../models/user.model"; 

@Injectable() 

export class UserService { 
    private baseUrl = "http://jsonplaceholder.typicode.com/users"; 

    constructor(private http: HttpClient) { 
    } 

    getUsers(): Observable<User[]> {   
     return this.http.get<User[]>(this.baseUrl) 
      .retry(2) 
      .catch(e => this.handleError("Get Users Error", e)); 
    } 

    private handleError(errorMessage: string, error: Object): any { 
     console.log(errorMessage, error); 
    } 
}; 

Ceci est mon html:

<div class="column" *ngFor="let user of listOfUsers | async; let i = index"> 
    <p>{{i + 1}}.{{user.name}}</p> 
</div> 

Ceci est mon élément:

import { Component, OnInit } from "@angular/core"; 
import { Observable } from "rxjs/Observable"; 
import 'rxjs/add/operator/do'; 

import { UserService } from "../../services/user.service"; 
import { User } from "../../models/user.model"; 

@Component({ 
    selector: "home-users", 
    templateUrl: "./home.component.html" 
}) 

export class HomeComponent implements OnInit { 
    private listOfUsers: Observable<User[]>; 
    loading: boolean; 

    constructor(private userService: UserService) {} 

    ngOnInit() { 
    this.getUsers(); 
    } 

    getUsers(): void { 
    this.loading = true; 
    this.listOfUsers = this.userService.getUsers().do(_ => this.loading = false); 
    } 
} 

Ceci est mon modèle:

export class User { 
    name: string; 
}; 

Answer 1

Est-ce que les modifications suivantes:

export interface User { 
    name: string; 
}; 

@Injectable() 

export class UserService { 
    private baseUrl = "http://jsonplaceholder.typicode.com/users"; 

    constructor(private http: HttpClient) { 
    } 

    getUsers(): Observable<User[]> { 
     return this.http.get<User[]>(this.baseUrl) 
     .retry(2) 
     .catch(e => this.handleError("Get Users Error", e)); 
} 

private handleError(errorMessage: string, error: HttpErrorResponse | any){ 
    console.log(errorMessage, error); 
} 

}

La nouvelle HttpClient ne marche pas définir une classe Response avec une méthode JSON. Au lieu de cela maintenant les développeurs peuvent utiliser les méthodes HTTP avec un paramètre de type.

Ceci est la capture d'écran de mon erreur de la console:

Answer 2

Certes, si vous changez votre composant Abritant ce qui suit remédiera vous émettez?

getUsers(): void { 
    this.loading = true; 
    this.userService.getUsers().subscribe((users) => { 
      // --> Observable<T> returns here 
      this.listOfUsers = users; // or if json: this.listOfUsers = users.json(); 
     }, 
     (errors) => { 
      // --> Errors are returned here 
     }, 
     () => { 
      // --> always called when finished 
      this.loading = false; 
     }); 
} 

modifier

Vous devez mapper les données renvoyées pour async:

this.listOfUsers = this.userService.getUsers().map((data)=> return data.json() || []); 

this.works bien de mon côté, consultez cet article: angular-2-async-pipe-example