Question

我正在尝试使用Angular和typescript加载XML文件，然后能够提取一些特定的节点值以将它们用于计算并在应用程序的其他某个组件中显示这些值。我对Angular和打字稿（以及一般的编码）完全不熟悉。我已经完成了Angular教程，但现在我正在努力开始并实现上述目标。我想我需要： - 提供文件路径并加载文件，并将其存储在变量中 - 从XML转换为其他东西（JSON？） - 根据名称和属性查找某个“节点”，并将值存储在变量中 - 使用{{}}在HTML中使用此变量。

我尝试了几个选项，但到目前为止没有一个可能，因为我混合了不同的路线。

我现在拥有的只有：

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

@Component({
  selector: 'my-app',
  template: (.... some html.... that displays title and the image below and the date using {{}} )

export class AppComponent {

title="Welcome !";
Welcome_Image="/Images/Images.JPG";
today=Date.now();

}

你能帮我开始上述任务吗？非常感谢你的帮助。

致以最诚挚的问候，劳伦斯

Answer 1

如果您希望将其XML转换为JSON，则有一些软件包可以帮助您实现这一目标。我使用了xml2js包。该代码看起来与以下内容相关：

import { promises as fsPromises } from 'fs'; 
import { parseString } from 'xml2js';

// Declare Variables
let JSONdata = null;
let XMLdata = null;

// Read the XML file 

fsPromises.readFile('../xmlParser/test.xml','utf-8')
.then(function(value){
    XMLdata = value; 
    console.log('XML data is: '+ value);

    // Parse XML
    parseString(XMLdata, function(err, result){
    if(err) {   
        console.log('There was an error when parsing: ' + err);
    }
    else {
        console.log('The JSON version is: ' + JSON.stringify(result));
        console.log('The JSON version is: ' + JSON.stringify(result.root.graph)); // Use this format to extract the tags/data you are interested in
        JSONdata = result;

        // Write the JSON data to a file
        fsPromises.writeFile("../xmlParser/edited-test.json", JSON.stringify(JSONdata), 'utf-8')
        .then( function() { console.log('Successfully written the file') })
        .catch( function(reason) { console.log('Something went wrong when writing the file: '+ reason) });
    }
    })
})

.catch(function(reason){
    console.log('There was some problem reading the file: '+ reason)});

希望这会有所帮助！

读取Angular / Typescript中的本地XML文件并提取一些节点值

1 个答案: