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

Posted 2021-04-04

每次我尝试将我的提供程序声明为.ts文件的构造函数时，运行我的应用程序时会出现以下错误。 qazxsw poi

这里是我的TS文件和相应的html文件以及提供者的ts文件。将提供程序导入ts文件似乎没问题，但每当我进入构造函数的提供程序时，我都会收到该错误。关于HTTP客户端的一些事情，但我不记得曾经在课堂上为HTTP Client创建一个提供程序，所以我不确定如何继续。

TS

https://imgur.com/a/pRn9lrJ

HTML

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

}


 }

提供者ts

<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>

答案

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

 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")

   } 

 }