Ionic Angular Uncaught (in promise) 错误

Question

我是 Ionic 新手。

This Lynda 课程是我对 Ionic 的介绍，在他介绍 providers 之前，我一直在成功地遵循讲师教程。我的提供商文件如下：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the PeopleDataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class PeopleDataProvider {

  constructor(public http: HttpClient) {
    console.log('Hello PeopleDataProvider Provider');
  }

  getPeople(){
    return this.http.get('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011')
    .map(res => res.json())
    .map(res => res.results);
  }

}

我的home.ts文件如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { DetailPage } from '../detail/detail';
import { PeopleDataProvider } from '../../providers/people-data/people-data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [PeopleDataProvider]
})
export class HomePage {

    public people = new Array();
    private detailPage;

  constructor(public navCtrl: NavController, public peopleData:PeopleDataProvider) {

    peopleData.getPeople().subscribe(people => {
      console.log('people',people);
      this.people = people;
    });
    this.detailPage = DetailPage;
  }

  loadDetail(person){
    console.log(person);
    this.navCtrl.push(this.detailPage, {person:person});
  }

}

当应用程序加载时，我收到以下错误：

Typescript Error

Property 'json' does not exist on type 'Object'.

src/providers/people-data/people-data.ts

return this.http.get('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011') .map(res => res.json()) .map(res => res.results);

post建议引入import 'rxjs/add/operator/map';作为解决方案

但是，该导入并没有解决我的问题。

额外并发症：

刷新浏览器几次后，错误变为以下异常，但我无法预测或控制何时发生：

ionic Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[PeopleDataProvider -> HttpClient]:

不知道这两个错误有没有关联

Answer 1

您不必在响应中使用 map 和调用 .json，仅当您使用旧的 Http instead of HttpClient.

时才需要这些

所以你的方法应该是这样的

PeopleDataProvider

import 'rxjs/add/operator/map';
..
getPeople(){
    return this.http.get<any>('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011')
    .map(res => res.results);
}

至于下面的错误，

ionic Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[PeopleDataProvider -> HttpClient]:

确保您已将 HttpClientModule 导入 AppModule。

import {HttpClientModule} from '@angular/common/http'

@NgModule({
  imports:      [ .. , HttpClientModule],
  ..
})

Stackblitz

Answer 2

因为您使用的是 HttpClient，所以很明显您使用的是 Angular 4.3+。在此版本后 .map amd .json() 已被删除.. 试试这个---

 getPeople(){
return this.http.get('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011');

}

删除--

.map(res => res.json())
.map(res => res.results);

Ionic Angular Uncaught (in promise) 错误

Ionic Angular Uncaught (in promise) error

ionic2

angular

Stackblitz