http observable - Angular 4
我需要显示我从web服务获得的html数据。我能够以我想要的格式查看数据,但无法在html上正确显示。我认为-any-在http.get中是问题所在。我可以在没有-any-的情况下读取控制台中的数据,但它可以正常工作。当它与它一起工作时,它仍然不能正确打印html。任何人都可以就此提供建议吗?http observable <any> - Angular 4
HTML
<div>{{this.res}}</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
//import { IMovie } from './movie';
import { AppService } from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
res: any[] ;
errorMessage: string;
constructor(private _appService: AppService) { }
ngOnInit(): void { this.getData(); }
getData(): void {
this._appService.getData()
.subscribe(
(res: any []) => this.res = res,
(error: any) => this.errorMessage = <any>error);
}
}
app.service.ts:
Injectable()
export class AppService {
private urlNorth = '';
constructor(private http: HttpClient) { }
getData(): Observable<any> {
const headers = new HttpHeaders();
headers.set('Content-Type', 'text/sml');
headers.set('Accept', 'text/xml');
headers.set('Content-Type', 'text/xml');
return this.http.get<any>(this.urlNorth,{responseType:'text', headers: headers})
.do(data => {
// console.log(data)
var dataParsed = data.replace('<string xmlns="service">', '').replace('</string>', '').replace(/</g, '<').replace(/>/g, '>');
// console.log(dataParsed);
parseString(dataParsed, (err, res) => {
if (err) {
return console.dir('invalid XML');
}
else {
console.log(res);
console.log(res.NewDataSet.Table[0].DataPointName[0]);
}
})
})
.catch(this.handleError);
}
**数据在控制台瓦特/ Ø任何**
类型any
是没有问题的。这只是TypeScript
注释来组织你的代码。问题在于,您将内联模板中的res
称为this.res
,但您应该只是res
。然而,它不会像你想象的那样工作。查看你的数据结构由于Table
是一个数组,你将不得不迭代这些数据。 Additionaly我强烈建议总是represnt您的数据class
export class Apps {
public Table: Array<any>; //here should be another type instead of "any"
/* rest of data if any */
}
回到你的问题,你应该在你的HTML文件<div>{{res}}</div>
但是这只是打印对象的字符串,如果我记得不错。因此,要正确访问您的数据,您应该重复使用表格。*ngFor
<div *ngFor="let el of res.NewDataSet.Table">
<span>{{el.BackColor}}</span>
<!-- all other data -->
</div>
嗨Szarik,谢谢你的时间。但是,我应该不担心http.get中的
在我的工作场所,我们正在为'requests'和'respond'做特殊的课程,以提供干净整洁的代码。但是你不需要,我认为创建类的回应有点过于迂腐,但是当你长时间回到代码时肯定会有帮助。 –
现在我看到您的服务也存在问题 –
看起来好像数据正在回来。我会首先回答你最初的问题(因为你在评论中添加了几个问题):
我的猜测是当你收到数据时,它没有显示,因为它是HTML,而angular不喜欢注入html。你的HTML
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
res[]: safeHTML;
而改成这样::
添加到您的TS
<div [innerHTML]="res"></div>
正如在前面的回答中提到,这是对资源的一个回报的解决方案,而不是一个不同的htmls数组。如果它是一个数组,你必须相应地处理它。例如:
<ng-container *ngFor="let r of res">
<div [innerHTML]="r">
</ng-container>
是的,数据正在回来。从它看起来不同于我的预期。它根本不应该有
我敢肯定,你不必把任何在此行app.service。ts
return this.http.get<any>(this.urlNorth,{responseType:'text', headers: headers})
因为get方法需要0类型参数。
您是否尝试过'
你能举一个“res”数据是什么的例子吗? – oppassum
控制台中是否有错误? –