parseString方法中的成员未定义

Question

I have XML file I need to convert to Json so I can use in my application. In my service I return the XML file:

constructor(private http: HttpClient) { }

loadXml() {
  return this.http.get('../../assets/1bbc5495-3872-4058-886e-aeee2a1cd52c.xml', { responseType: 'text' });
}

In my component I try to get the data inside the XML file available:

parseString = require('xml2js').parseString;
data = [];

constructor(
  private _sharedService: SharedService
) {}

ngOnInit() {
  this.convertXmlToJson();
}

convertXmlToJson() {
  let data;
  this._sharedService.loadXml()
    .subscribe(
      res => {
        this.parseString(res, function (err, result) {
          this.data = result.rss.channel[0];
        });
      }
    )
}

This results in the error:

Cannot set property 'data' of undefined

Why can't I use this.data ?

//EDIT.

This might not be the best method but it works:

convertXmlToJson() {
  let data;
  this._sharedService.loadXml()
    .subscribe(
      res => {
        this.setData(res)
      }
    )
}

setData(res) {
  let data;
  this.parseString(res, function (err, result) {
    data = result.rss.channel[0]
  })
  this.data = data;
}

I now pass the data from the method in the service to a function that stores it in a function variable and I set that variable on the class member.

Answer 1

You are losing the context( this ) inside the subscription's response.

convertXmlToJson() {
  let data;
  this._sharedService.loadXml()
    .subscribe(
      res => {
        this.parseString(res, (err, result) => this.data = result.rss.channel[0]).bind(this);
      }
    )
}

That's why we need to pass with with bind() or call() .

bind() mostly for functions that are being called as callbacks and call() for functions out of scope (don't have the this context) but are using the this keyword.

Example:

function foo() {
  this.myBool = !this.myBool;
}

class MyClass {
  myBool = false;

  foo.call(this); // will read this.myBool because we are passing the context

  someSubscription.subscribe(
    resp => foo().bind(this) // being a callback function you need to pass the this context with a bind()
  );
}