http observable <any> - Angular 4

Question

J'ai besoin d'afficher les données sur le HTML que je reçois du service Web. Je suis en mesure de voir les données dans un format que je veux, mais je ne peux pas afficher correctement sur html. Je pense que -any- dans http.get est le problème. Je peux lire des données dans la console sans -any- mais cela fonctionne très bien avec. Quand cela fonctionne, il ne s'imprime pas correctement en HTML. Quelqu'un peut-il donner des conseils à ce sujet?

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

données ** dans la console w/o tout **

{{this.res}} en html

Answer 1

type any est pas le problème. C'est juste l'annotation TypeScript pour organiser votre code. Le problème est que vous vous référez à la res dans le modèle en ligne comme this.res, mais vous devriez juste res. Cependant, cela ne fonctionnera pas comme vous le pensez. En regardant votre structure de données Vous devrez itérer à travers ces données en raison de Table est un tableau. Additionnellement Je vous suggère fortement à represnt toujours vos données class

export class Apps { 
    public Table: Array<any>; //here should be another type instead of "any" 
    /* rest of data if any */ 
} 

Retour à votre question, vous devriez avoir dans votre fichier html <div>{{res}}</div> mais Imprimons simplement votre objet sous forme de chaîne si je me souviens bien. Donc, pour accéder correctement vos données, vous devez itérer table à l'aide *ngFor

<div *ngFor="let el of res.NewDataSet.Table"> 
    <span>{{el.BackColor}}</span> 
    <!-- all other data --> 
</div> 

Answer 2

Il semble que les données revient. Je vais d'abord répondre à votre question initiale (puisque vous avez ajouté quelques questions dans les commentaires):

Je suppose que lorsque vous récupérez des données, elles ne s'affichent pas parce que c'est du HTML, et angulaire n'aime pas l'injection de code HTML.

Ajouter à votre TS:

import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

res[]: safeHTML; 

Et changer votre code html à ceci:

<div [innerHTML]="res"></div> 

Comme mentionné dans une réponse précédente, c'est une solution pour un retour unique de résolution, non un tableau de différents htmls. Si c'est un tableau, vous devrez le gérer en conséquence. par exemple:

<ng-container *ngFor="let r of res"> 
    <div [innerHTML]="r"> 
</ng-container> 

Answer 3

Je suis sûr que vous ne devez pas mettre tout à cette ligne dans app.service.ts

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

car la méthode get attend des arguments de type 0.