使用xml2js在angular 6中未定义parseString [英] parseString undefined in angular 6 using xml2js

问题描述

到目前为止，我无法使用Angular 6使xml2js代码正常工作.我有一个service.ts返回xml，但是在调用xml2js.parseString转换为json时，我始终遇到未定义的错误.

I cannot get the xml2js code to work so far using angular 6. I have a service.ts returning xml however when calling xml2js.parseString to convert to json I consistently get an undefined error.

"core.js:1673错误TypeError:无法读取未定义的属性'parseString' "

"core.js:1673 ERROR TypeError: Cannot read property 'parseString' of undefined "

service.ts

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http';

export interface Zid {
  zpid: number;
}
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
  }),
  responseType: 'text' as 'text'
};    

@Injectable({
  providedIn: 'root'
})

export class CdataServiceService {

  constructor(private _http: HttpClient) { }
  zipID = 'http://APiXml';
  getZipID() {
    return this._http.get(this.zipID, httpOptions)
    .pipe
      (map
        (res => 
          {
            return res
          }
        )
      )
  }
}

component.ts

component.ts

import { Component, OnInit } from '@angular/core';
import { CdataServiceService, Zid } from '../cdata-service.service';
import { xml2js } from 'xml2js';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-cgetter',
  templateUrl: './cgetter.component.html',
  styleUrls: ['./cgetter.component.css']
})
export class CgetterComponent implements OnInit {

  data = [];

  constructor(private cds: CdataServiceService) { }

  onKeyCompGet(event:any){
    console.log(event.target.value);
  }
  _zid :Zid

  getTheComps(){
    this.cds.getZipID()//cdataServiceService.getZipId()
    .subscribe(
      res => {
        this.convertToJson(res);
     })
  }


  public convertToJson(data: string): Object {

    let res;
    console.log(data);

    xml2js.parseString(data, { explicitArray: false }, (error, result) => {

      if (error) {
        throw new Error(error);
      } else {
        res = result;
        console.log(result);
      }

    });

    return res;

  }

  ngOnInit() {
  }

}

我已经将返回的xml运行到了在线转换器，并且没有遇到任何问题.我不知道为什么该函数返回未定义.

I have ran the returned xml to an online converter and didn't run into any problems. I have no clue on why the function returns undefined.

还有没有一种方法可以验证xml2js中的所有文件是否已正确加载?

Also is there a way to verify all the files in xml2js is being loaded properly?

推荐答案

将您在类CgetterComponent中的导入更改为:

Change your import in class CgetterComponent to:

import xml2js from 'xml2js';

或者:

import * as xml2js from 'xml2js';

如果您查看 xml2js package.json中被称为main文件的a>文件.它导出具有各种属性(例如Builder，Parser和parseString)的对象，它们都不具有名称/标识符xml2js.因此，命名为导入使用import { xml2js } from 'xml2js';试图重要的是不存在的对象属性(在我共享的示例中查看日志xml2js以查看导出的属性)，因此是undefined.

If you examine the xml2js file which is referenced as the main file in the project's package.json. It exports an object with various properties such as Builder, Parser, and parseString, none of them have the name/identifier xml2js. So the named import you are using of import { xml2js } from 'xml2js'; is attempting to important a non-existent object property (log xml2js in the example I shared to see exported properties), hence the undefined.

您可以采用的另一种导入方法是使用命名的导入直接导入您正在使用的parseString函数.看起来像这样:

Another import approach you can take, is using a named import to directly import the parseString function you are using. This would look like:

import { parseString } from 'xml2js';

然后您只需按以下方式使用它即可:

And then you would simply use it as follows:

parseString(data, { explicitArray: false }, (error, result) => {
  if (error) {
    throw new Error(error);
  } else {
    res = result;
    console.log(result);
  }
});

这是示例实际的导入/使用情况.

Here is an example of the import/usage in action.

希望有帮助！

这篇关于使用xml2js在angular 6中未定义parseString的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！