Angular 4 Observable服务不能用于api http得到

Question

Angular 4 Observable服务不能用于api http get。

返回observable的http似乎不起作用。

我使用的是新的HttpClient

这是错误我得到：

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

解决方案？

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

这是我的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); 
    } 
}; 

这是我的html：

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

这是我的组件：

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

这是我的模型：

export class User { 
    name: string; 
}; 

Answer 1

执行以下更改：

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

}

新HttpClient犯规定义一个JSON方法的Response类。现在开发人员可以使用带有类型参数的HTTP方法。

这是我的控制台错误的屏幕截图：

Answer 2

当然，如果你改变你的主页组件以下内容，将解决你的问题？

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

编辑

你必须为异步返回的数据映射：

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

this.works在我身边很好，看看这篇文章：angular-2-async-pipe-example