时间戳

首页 > 解决方案 > 在 Angular 中读取 XML 文件

angular - 在 Angular 中读取 XML 文件

问题描述

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

请让我知道如何在 Angular 中读取 XML 文件

错误：

（未知 url）的 http 失败响应：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

解决方案

好吧，您可以按照本文xml2js中的建议使用将响应转换为.xmljson

在这里，试一试：

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：

<?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>

这是您的参考的工作示例演示。

推荐阅读