Question

我正在尝试从我的api中提取数据，并在我的离子应用程序中填充它，但是当我进入页面时应该填充数据时它会崩溃。下面是我的两个.ts文件：

import { Component } from '@angular/core';

import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  data: any;
  loading: any;

  constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: `
        <ion-spinner></ion-spinner>`
    });
    this.getdata();
  }

  getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
      result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
      },
      err => {
        console.error("Error : " + err);
      },
      () => {
        this.loading.dismiss();
        console.log('getData completed');
     }
   );
 }
}

和另一个文件：

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  getJsonData() {
    // return Promise.resolve(this.data);

     return this.http.get('url').map(res => res.json());
   }

}

我也尝试过使用HttpModule，但这是一个致命的错误。错误如下所示：

Error: Uncaught (in promise): Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
    at _NullInjector.get (http://lndapp.wpi.edu:8100/build/vendor.js:1276:19)

我不确定为什么没有提供程序错误，因为这是通过离子框架

创建的提供程序

Answer 1

要在您的应用中使用Http，您需要将HttpModule添加到app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ]

修改

如下面的评论所述， HttpModule 现在 deprecated ，请使用 import { HttpClientModule } from '@angular/common/http' ;确保 HttpClientModule 数组中 imports:[]

Answer 2

更新：Angular v6 +

对于从较早版本（Angular v2-v5）转换的应用程序：HttpModule现在已弃用，您需要将其替换为HttpClientModule，否则也会收到错误消息。

在您的 app.module.ts 中，将import { HttpModule } from '@angular/http';替换为新的HttpClientModule import { HttpClientModule} from "@angular/common/http"; 注意：请确保随后更新模块imports[]数组通过删除旧的HttpModule并将其替换为新的HttpClientModule。
在您使用HttpModule替换的任何服务中 import { Http } from '@angular/http';与新的HttpClient import { HttpClient } from '@angular/common/http';
更新如何处理Http响应。例如-如果您的代码看起来像这样

http.get('people.json').subscribe((res:Response) => this.people = res.json());

上面的代码示例将导致错误。我们不再需要解析响应，因为它已经在配置对象中以JSON的形式返回。

订阅回调将数据字段复制到组件的config对象中，该对象已绑定在组件模板中以供显示。

有关更多信息，请参见- Angular HttpClientModule - Official Documentation

Answer 3

您还需要将Angular HttpClientModule中的'@angular/common/http'导入到主AppModule中，以发出HTTP请求。

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { ServiceService } from '../../../services/service.service';

@NgModule({
   imports: [
       HttpClientModule
   ],
   providers: [
       ServiceService
   ]
})
export class AppModule {...}

Answer 4

将这两个文件添加到您的app.module.ts

import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

在将这些声明到提供程序之后。

providers: [
    Api,
    Items,
    User,
    Camera,
    File,
    FileTransfer];

这对我有用。

Answer 5

在ionic 4.6中，我使用以下技术，并且可以正常工作。我正在添加此答案，以便如果有人在较新的离子版本应用程序中遇到类似的问题，则可能会对他们有所帮助。

i）打开app.module.ts并添加以下代码块以导入HttpModule和HttpClientModule

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

ii）在@NgModule导入部分中，添加以下行：

HttpModule,
HttpClientModule,

所以，在我的情况下，@ NgModule看起来像这样：

@NgModule({
  declarations: [AppComponent ],
  entryComponents: [ ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule, 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

就是这样！

Answer 6

我在一个有角度的项目中（不幸的是）通过tsconfig.json使用包含源代码来连接不同的代码集合。我在服务中遇到了类似的StaticInjector错误（例如上例中的RestService），当提供受影响的代码时，我可以通过在deps数组中列出服务依赖项来解决该错误模块中的服务，例如：

import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RestService } from 'mylib/src/rest/rest.service';
...
@NgModule({
  imports: [
    ...
    HttpModule,
    ...
  ],
  providers: [
    {
      provide: RestService,
      useClass: RestService,
      deps: [HttpClient] /* the injected services in the constructor for RestService */
    },
  ]
  ...

Answer 7

我试图解决该问题大约一个小时，但只是想重新启动服务器。只看到问题已解决。

如果您对APP模块进行了更改，但问题仍然存在，请停止服务器，然后再次尝试运行serve命令。

使用离子4和7号角

没有Http StaticInjectorError的提供者

7 个答案:

更新：Angular v6 +