Console.log到html元素-Angular 4

Question

简单的问题。 我收到来自Web服务的以下响应，并且正在chrome控制台上进行观察。 如何将其部署到角度4的HTML元素中？ 我尝试转换为JSON，但是遇到另一个问题，因此我决定继续使用parseString之后收到的内容。

我要做的就是使用Angular在html元素中显示这些字段。 目前，我只有component.ts文件，并尝试在html中执行某些操作，但无法弄清楚。

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { Observable } from 'rxjs/Observable';
import { RequestOptions, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { parseString } from 'xml2js'
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

//import { IMovie } from './movie';

@Injectable()
export class AppService {
    private urlNorth = 'service';
    constructor(private http: HttpClient) { }

    getMovies(): 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, { headers })
            .map(res => {
                var result = res.text().replace('<string xmlns="service">', '').replace('</string>', '').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
                parseString(result, (err, resultN) => {
                    if (err) {
                        return console.dir('invalid XML');
                    }
                    else {
                        console.log(resultN);
                    }
                })

            })

            .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse): ErrorObservable {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        const errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
        console.error(errorMessage);
        return Observable.throw(errorMessage);
    }
}

记录数据

Answer 1

这段代码：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

不属于您的服务文件。 这是一个组件装饰器，它应该在您的组件上。 像这样：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private _appService: AppService) { }

   getProduction() {
      this._appService.getProduction()
   }

}

然后，您的index.html文件应使用标签显示HTML。

在仔细查看代码时，还存在其他问题。 例如，您两次调用getProduction。 您不应该从服务构造函数中调用它。

另外，订阅应该在组件中，而不是服务中。

而且您应该使用Http或HttpClient，而不要同时使用。

而且TestBed仅用于测试中，而不能用于服务中。

我在这里有一个工作组件/服务的更完整示例：APM-Final文件夹中的https://github.com/DeborahK/Angular-GettingStarted 。 考虑浏览该代码（或从该代码开始）并根据应用程序的需要进行调整。

Answer 2

这是工作服务。 （如果没有代码，我将无法在您的代码中成功显示出来。因此，您将需要对示例进行适当的替换。）

服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import 'rxjs/add/observable/throw';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

import { IMovie } from './movie';

@Injectable()
export class MovieService {
    private moviesUrl = './api/movies/movies.json';

    constructor(private http: HttpClient) { }

    getMovies(): Observable<IMovie[]> {
        return this.http.get<IMovie[]>(this.moviesUrl)
            .do(data => console.log(JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse): ErrorObservable {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        const errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
        console.error(errorMessage);
        return Observable.throw(errorMessage);
    }
}

零件：

import { Component, OnInit } from '@angular/core';

import { IMovie } from './movie';
import { MovieService } from './movie.service';

@Component({
    templateUrl: './movie-list.component.html',
    styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
    movies: IMovie[];
    errorMessage: string;

    constructor(private movieService: MovieService) { }

    ngOnInit(): void { this.getMovies(); }

    getMovies(): void {
        this.movieService.getMovies()
            .subscribe(
                (movies: IMovie[]) => this.movies = movies,
                (error: any) => this.errorMessage = <any>error);
    }
 }