http observable <any> - 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(/&lt;/g, '<').replace(/&gt;/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); 
}

**数据在控制台瓦特/ Ø任何**

{{this.res}}在HTML

来源

2017-10-20 James

您是否尝试过'

'？ –

你能举一个“res”数据是什么的例子吗？ – oppassum

控制台中是否有错误？ –

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

来源

2017-10-20 14:53:53

嗨Szarik，谢谢你的时间。但是，我应该不担心http.get中的？ – James

在我的工作场所，我们正在为'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>

来源

2017-10-20 15:04:33 oppassum

是的，数据正在回来。从它看起来不同于我的预期。它根本不应该有标记，因为我在service.ts中解析了它 – James

我敢肯定，你不必把任何在此行app.service。ts

return this.http.get<any>(this.urlNorth,{responseType:'text', headers: headers})

因为get方法需要0类型参数。

来源

2017-10-20 15:14:56

http observable <any> - Angular 4

回答

相关问题