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

回答

相關問題