Ionic Angular Uncaught (in promise) 错误答案

【问题标题】：Ionic Angular Uncaught (in promise) errorIonic Angular Uncaught (in promise) 错误
【发布时间】：2018-09-02 22:49:39
【问题描述】：

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

}

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

打字稿错误

“对象”类型上不存在属性“json”。

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

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

This 帖子建议引入import 'rxjs/add/operator/map'; 作为解决方案。

但是，该导入并不能解决我的问题。

额外的并发症：

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

离子错误：未捕获（承诺）：错误： StaticInjectorError(AppModule)[PeopleDataProvider -> HttpClient]:

我不知道这两个错误是否相关。

【问题讨论】：

标签： angular ionic2

【解决方案1】：

您不必使用map 并在响应中调用.json，仅当您使用旧的Http 而不是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);
}

至于下面的错误，

离子错误：未捕获（承诺）：错误：StaticInjectorError(AppModule)[PeopleDataProvider -> HttpClient]：

确保您已在您的AppModule 中导入HttpClientModule。

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

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

Stackblitz

【讨论】：

感谢您的详尽回答。您能否指导我找到我可以参考的最佳资源，这将帮助我了解已弃用和未弃用的内容？很明显，我正在关注的教程已经过时了。
我建议您参考official angular 文档，已标记已弃用的API，例如查看此Http 文档

【解决方案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);

【讨论】：