http observable<any> -角4

Question

我需要在html上显示我从web服务获得的数据。我能够看到我想要的格式的数据，但我不能正确地显示在html上。我认为-any- in http.get是问题所在.我可以在没有-任何的情况下读取控制台中的数据，但是它可以很好地工作。当它与它一起工作时，它仍然不能正确地在html中打印。有人能就此提供建议吗？

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

**控制台w/o中的数据任何**

​

​

{{this.res} in html

​

Answer 1

我敢肯定你不需要把任何放在app.service.ts的这一行

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

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

Answer 2

输入any不是问题所在。它只是组织代码的TypeScript注释。问题是，您将内联模板中的res引用为this.res，但您应该只使用res。但是它不会像你想的那样起作用。查看您的数据结构，您将不得不迭代这些数据，因为Table是一个数组。此外，我强烈建议始终将数据表示为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>

Answer 3

看上去数据似乎要回来了。我将首先回答您的最初问题(因为您在评论中添加了一些问题)：

我的猜测是，当您返回数据时，它不会显示，因为它是HTML，角不喜欢注入html。

将此添加到TS中：

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

res[]: safeHTML;

并将html更改为：

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

正如前面的答案所提到的，这是一个只返回一个res的解决方案，而不是一个包含不同html的数组。如果它是一个数组，则必须相应地处理它。例如：

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