每次我尝试将我的提供程序声明为.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")
}
}