Angular/TypeScript报错：Cannot set property 'data' of undefined 求助

这个错误的核心原因是回调函数里的this指向发生了变化——你用的普通function回调会创建自己的上下文，导致里面的this不再指向你的组件实例，自然找不到this.data。下面给你三种简单的解决方法：

方法1：使用箭头函数（最推荐） #

箭头函数不会绑定自己的this，它会继承外层上下文的this（也就是你的组件实例），直接修改回调函数即可：

data = [];
ngOnInit() {
  this.myService.getData().subscribe(XMLResult => {
    const parseString = require('xml2js').parseString;
    parseString(XMLResult, (err, result) => { // 换成箭头函数
      console.dir(result.listResponse.instance);
      this.data = result.listResponse.instance; // 现在this指向组件，不会报错
    });
  });
}

方法2：提前保存组件的this引用 #

在回调外部把组件的this存到一个变量里，比如self，然后在回调里用这个变量访问组件属性：

data = [];
ngOnInit() {
  this.myService.getData().subscribe(XMLResult => {
    const parseString = require('xml2js').parseString;
    const self = this; // 保存组件的this
    parseString(XMLResult, function (err, result) {
      console.dir(result.listResponse.instance);
      self.data = result.listResponse.instance; // 用self代替this
    });
  });
}

方法3：用bind绑定this #

通过bind(this)把组件的this绑定到回调函数上，强制它的上下文指向组件：

data = [];
ngOnInit() {
  this.myService.getData().subscribe(XMLResult => {
    const parseString = require('xml2js').parseString;
    parseString(XMLResult, function (err, result) {
      console.dir(result.listResponse.instance);
      this.data = result.listResponse.instance;
    }.bind(this)); // 绑定组件的this到回调
  });
}

额外优化建议 #

最好把xml2js的导入移到组件顶部，不要在subscribe内部使用require，这样更符合Angular/TypeScript的规范：

import { Component, OnInit } from '@angular/core';
import { parseString } from 'xml2js'; // 顶部导入

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  data = [];

  constructor(private myService: YourService) {}

  ngOnInit() {
    this.myService.getData().subscribe(XMLResult => {
      parseString(XMLResult, (err, result) => {
        console.dir(result.listResponse.instance);
        this.data = result.listResponse.instance;
      });
    });
  }
}

内容的提问来源于stack exchange，提问作者user9597092