Question

每次我尝试将提供程序放入.ts文件的构造函数中时，都会在运行我的应用程序时出现以下错误。 https://imgur.com/a/pRn9lrJ

这也是我的TS文件以及与提供商的ts文件相对应的html文件。只是将提供程序导入ts文件后似乎还可以，但是每当我将提供程序输入到构造函数中时，我都会收到该错误。关于HTTP客户端的一些知识，但是我不记得曾经在课堂上为HTTP客户端创建提供程序，所以我不确定如何继续。

TS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { CurrencyRatesProvider } from '../../providers/currency-rates/currency-rates';


@IonicPage()
@Component({
  selector: 'page-converter',
  templateUrl: 'converter.html',
})

export class ConverterPage {
changingFrom:string;
changingTo:String;
conversion:number=0;

 constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, private currencyRatesProvider: CurrencyRatesProvider) {
  }

  ionViewDidLoad() {
   console.log('ionViewDidLoad ConverterPage');

    }


  onSave(){
console.log(this.changingFrom+" "+this.changingTo);

this.storage.set("changingFrom",this.changingFrom);
this.storage.set("changingTo",this.changingTo);


  }
     ionViewWillEnter(){
  this.storage.get("changingFrom").then((data) => {
      this.changingFrom=data;
  })
    .catch((err) => {
      console.log("Error = " + err);
    })


    this.storage.get("changingTo").then((data) => {
      this.changingTo=data;
  })
    .catch((err) => {
      console.log("Error = " + err);
    })

}


 }

HTML

<ion-header>
  <ion-navbar>
    <ion-title text-center>Converter</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>

      <ion-input type="number" placeholder="Enter amount" floating>    </ion-input>
      <ion-select [(ngModel)]="changingFrom">
        <ion-option value="euro">Euro</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>


   <ion-list>

     <ion-item>

       <ion-select right [(ngModel)]="changingTo">
    <ion-option value="euro">Euro</ion-option>
    <ion-option value="usd">USDollars</ion-option>
    <ion-option value="aud">Austrailian Dollars</ion-option>
    <ion-option value="cad">Canadian Dollars</ion-option>
    <ion-option value="sek">Swedish Krona</ion-option>
    <ion-option value="mxn">Mexican Peso</ion-option>
  </ion-select>
   </ion-item>
     <ion-item>
        <h2> Your amount is {{conversion}}</h2>
      <button ion-button large color="secondary"  (onclick)="onSave()">Convert</button>
    </ion-item>

  </ion-list>

 </ion-content>

提供商ts

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

@Injectable()
export class CurrencyRatesProvider {

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

  GetMovieData():Observable<any>{
return this.http.get("http://data.fixer.io/api/latest?access_key=2d41e1b777f6f0002852f4e1608af906&symbols=USD,AUD,CAD,PLN,MXN&format=1")

   } 

 }

Answer 1

如JBNizet所说，在您的module.ts文件（主要是app.module.ts）中添加HttpClientModule

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

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

需要帮助克服Ionic v3中的此错误

1 个答案: