角 2/5.使用 HttpClient 的服务出错并且不起作用 [英] Angular 2/5. Service with HttpClient makes mistake and doesn't works
问题描述
我正在尝试制作从远程服务器获取(试图获取)XML 文件的服务.我没有足够的经验来自己发现错误.app.component.ts
的相关代码:
I'm trying to make service which takes (trying to take) XML-file from remote server. I haven't enough experience to find mistakes by myself. Relevant code of app.component.ts
:
import { Component, OnInit, AfterViewInit, ElementRef, ViewChild, Renderer2 } from '@angular/core';
import { CanvasSettings } from './canvas-settings';
import { Rate } from './rate';
import { RateService } from './rates.service';
import { CBRRateService } from './cbrrates.service';
import { DatePoints, Year, Month, Day, Monthes, ofMonth } from './dates';
import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
@Component({ // line 9, there is an error
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ RateService, CBRRateService, HttpClient, HttpHandler, HttpClientModule ]
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild("helper") helper: ElementRef;
//...
rates: Rate[];
cbrrates: any;
//...
constructor(private _rateService: RateService, private _rateCBRService: CBRRateService) {}
ngOnInit() {
//...
}
getCBRRates():void { // Uses http. Doesn't work.
this._rateCBRService.getCBRRates().subscribe(cbrrates => {this.cbrrates = cbrrates});
}
getRates():void { // Doesn't use http, works fine
this._rateService.getRates().subscribe(rates => this.rates = rates);
}
//...
}
以及cbrrates.service.ts
的代码清单:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHandler, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { of } from 'rxjs/observable/of'; // It used in earlier version, now it useless
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'plain/text' }) // I've found no way to get XML, so 'plain/text'. Everywhere JSON.
};
@Injectable()
export class CBRRateService {
targetURL: string = "http://www.cbr.ru/scripts/XML_dynamic.asp?date_req1=01/01/2016&date_req2=02/02/2018&VAL_NM_RQ=R01235";
constructor(private http: HttpClient){}
getCBRRates(): Observable<any> {
return (this.http.get(this.targetURL, {responseType: 'text'}));
}
}
bash 控制台错误:
Error in bash console:
ERROR in src/app/app.component.ts(9,12): error TS2345:
Argument of type '{ selector: string; templateUrl: string;
styleUrls: string[]; providers: (typeof HttpHandler | ty...' is not
assignable to parameter of type 'Component'.
Types of property 'providers' are incompatible.
Type '(typeof HttpHandler | typeof HttpClient | typeof HttpClientModule
| typeof CBRRateService)[]' is not assignable to type 'Provider[]'.
Type 'typeof HttpHandler | typeof HttpClient | typeof HttpClientModule
| typeof CBRRateService' is not assignable to type 'Provider'.
Type 'typeof HttpHandler' is not assignable to type 'Provider'.
Type 'typeof HttpHandler' is not assignable to type 'ClassProvider'.
Property 'provide' is missing in type 'typeof HttpHandler'.
浏览器控制台错误:
Failed to load resource: the server responded with a status of 404 (Not Found)
共 2 个问题:
如何修复服务
CBRRateService
并使其正常工作?
是否存在某种通过从远程服务器获取数据的服务获取和解析 XML 数据的方法?
Does exist some way to get and parse XML-data via service which gets data from remote server?
推荐答案
@MikhailFilchushkin, 当你写 this.http.get(this.targetURL, {responseType: 'text'}) 时,你在响应中输入一个字符串".因此,您必须将此字符串转换为对象.你可以做类似的事情
@MikhailFilchushkin, when you write this.http.get(this.targetURL, {responseType: 'text'}), you recibe in the response a "string". So, you must convert this string to an object. You can do something like
getCBRRates(): Observable<any> {
return this.httpClient.get(this.targetURL, { responseType: 'text' })
.map((response: string) => { //response is a string
let result: any[] = [];
let records = response.split('<Record'); //make a array of string
let index = 0;
records.forEach(r => {
let date = r.split('Date=');
let id = r.split('Id=');
let nominal = r.split('<Nominal>');
let value = r.split('<Value>');
if (index > 0) { //the first is the header of the xml
result.push({
date: date[1].substr(1,10), //date[0] is the text before "Date"
id: id[1].substr(1,6), //idem id
nominal: nominal[1].substring(0,nominal[1].indexOf('<')),
value: value[1].substring(0,value[1].indexOf('<')),
})
}
index++;
});
return result;
});
}
这篇关于角 2/5.使用 HttpClient 的服务出错并且不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!