在 Angular 中读取 XML 文件答案

【问题标题】：XML file reading in Angular在 Angular 中读取 XML 文件
【发布时间】：2019-12-16 12:46:29
【问题描述】：

我正在尝试以角度从资产文件夹中读取 XML 文件，我尝试了 HttpClient get 方法来获取数据，但它显示以下错误，我在 http 方法中传递了交叉标头。

请告诉我如何在 Angular 中读取 XML 文件

错误：

http 失败响应（未知 url）：0 未知错误”，错误：错误

代码：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
    selector: 'app-root',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent {
    constructor(private router: Router, private httpClient: HttpClient) {
        this.getProducts();
    }


    getProducts() {
        const headers = new HttpHeaders(  
        { 'Access-Control-Allow-Headers': 'Content-Type',
      'Access-Control-Allow-Methods': 'GET',
      'Access-Control-Allow-Origin': '*'
    });

        headers.set('Content-Type', 'text/xml');

        this.httpClient
            .get('assets/test.xml', { headers, responseType: 'text' })
            .subscribe(output => console.log(output));
    }
}

【问题讨论】：

标签： angular

【解决方案1】：

好吧，您可以按照this article 中的建议使用xml2js 将xml 响应转换为json。

来，试试看：

import { Component } from "@angular/core";
import { Observable } from "rxjs/observable";
import { switchMap } from "rxjs/operators";
import { HttpClient } from "@angular/common/http";

declare const require;
const xml2js = require("xml2js");

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  employees$: Observable<Array<any>>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.employees$ = this.getEmployees();
  }

  getEmployees() {
    return this.http
      .get("/assets/employees.xml", { responseType: "text" })
      .pipe(
        switchMap(async xml => await this.parseXmlToJson(xml))
      );
  }

  async parseXmlToJson(xml) {
    // With parser
    /* const parser = new xml2js.Parser({ explicitArray: false });
    parser
      .parseStringPromise(xml)
      .then(function(result) {
        console.log(result);
        console.log("Done");
      })
      .catch(function(err) {
        // Failed
      }); */

    // Without parser
    return await xml2js
      .parseStringPromise(xml, { explicitArray: false })
      .then(response => response.Employees.Employee);
  }
}

在你的模板中：

<ul class="list-group" *ngIf="employees$ | async as employees">
  <li class="list-group-item" *ngFor="let employee of employees">
    <pre>{{ employee | json }}</pre>
  </li>
</ul>

这是xml sourced from the this linked article：

<?xml version="1.0" encoding="UTF-8"?>    
<Employees>    
   <Employee>    
      <id>1</id>    
      <name>Faisal</name>    
      <gender>Male</gender>    
      <mobile>514545</mobile>    
   </Employee>    
   <Employee>    
      <id>2</id>    
      <name>Bhavdip</name>    
      <gender>Male</gender>    
      <mobile>5431643</mobile>    
   </Employee>    
   <Employee>    
      <id>3</id>    
      <name>Irshad</name>    
      <gender>Male</gender>    
      <mobile>43265436</mobile>    
   </Employee>    
   <Employee>    
      <id>4</id>    
      <name>Keyur</name>    
      <gender>Male</gender>    
      <mobile>5435431</mobile>    
   </Employee>    
   <Employee>    
      <id>5</id>    
      <name>Tabish</name>    
      <gender>Male</gender>    
      <mobile>432656</mobile>    
   </Employee>    
</Employees>

这里有一个Working Sample Demo 供您参考。

【讨论】：