在angular2中读取xml文件数据答案

【问题标题】：Read xml file data in angular2在angular2中读取xml文件数据
【发布时间】：2017-07-23 11:33:37
【问题描述】：

在 Angular2 项目中，我有一个 xml 文件，其中包含有关员工的所有信息。我需要从该xml 文件中读取员工数据并显示在我的组件模板中。

如何使用http服务读取xml数据？

【问题讨论】：

你的问题不清楚。你是说你有来自 API 的 XML？
将 xml 文件传递到后端。解析它..将解析后的数据存储到db。然后通过api等将相关数据提供给前端。

标签： angular typescript visual-studio-code

【解决方案1】：

浏览器 API 已经带有一个 XML 解析器。看看吧。

https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML

成功解析文档后，您将使用类似于 DOM 导航的 API 进行导航。

一些 HTTP 客户端库可能带有解析 XML 的选项（不要安装一个新的只是为了做到这一点，检查你正在使用的那个！）。我还快速浏览了一下 Angular 的 HttpClient，一开始并没有找到任何 XML 解析选项。

旧的XMLHttpRequest API 还带有一个选项，可以直接将响应解析为 XML (.responseXML)，但您可能不会使用它，因为您可能已经为 HTTP 客户端使用了其他东西。

【讨论】：

【解决方案2】：

对于解析，您可以尝试使用 xml2js：https://github.com/Leonidas-from-XIV/node-xml2js。

检查这个其他答案： XML data parsing in angular 2

简而言之：

import { parseString } from 'xml2js';
/* ... */
let xml = "<root>Hello xml2js!</root>"
parseString(xml, function (err, result) {
   console.dir(result);
});

【讨论】：

【解决方案3】：

您可以使用jQuery.parseXML 来实现，但您需要将 jQuery 与 Angular 集成。

jQuery.parseXML利用浏览器原生解析功能创建一个有效的 XML 文档。然后可以将此文档传递给 jQuery创建一个典型的可以遍历的jQuery对象被操纵。

有关与 jQuery 集成的更多详细信息，请参阅How to use jQuery with Angular2。

使用http服务

let xml = "";
this.http.get(url)
  .map((res:Response) => res.text())
  .subscribe(data => {
        xml = data;
        console.log($.parseXML(xml));
     });

【讨论】：