[英]Angular 4 Observable service not working for an api http get
Angular 4 Observable服务不适用于api http get。
返回可观察值的http似乎不起作用。
我正在使用新的HttpClient
这是我得到的错误:
错误:找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables,例如数组。
解?
似乎不喜欢Observable进入ngFor。 也许我需要做一个switchMap? 在组件中。
这是我的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;
};
当然,如果将家用组件更改为以下组件,它将解决您的问题?
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() || []);
这在我这边工作正常,请查看此文章: angular-2-async-pipe-example
进行以下更改:
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方法与类型参数一起使用。
这是我的控制台错误的屏幕截图:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.