首页 文章

Angular 4 Observable服务不适用于api http get

提问于
浏览 次
0

Angular 4 Observable服务不适用于api http get .

返回可观察的http的http似乎无效 .

我正在使用新的HttpClient

This is the error I get:

错误：无法找到'object'类型的不同支持对象'[object Object]' . NgFor仅支持绑定到诸如Arrays之类的Iterables .

Solution?

它似乎不喜欢Observable进入ngFor . 也许我需要做一个switchMap？在组件中 .

This is my http service call:

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

This is my html:

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

This is my component:

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

This is my model:

export class User {
  name: string;
};
angular angular-http angular-observable

2 回答

  • 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方法与类型参数一起使用 .

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

    enter image description here

    回复于
  • 1

    当然，如果您将主页组件更改为以下内容，它将解决您的问题？

    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

    回复于

相关问题