Angular中如何在ngOnInit内部函数向外部数组添加元素？

嘿，我来帮你搞定这个问题！你的代码里有两个关键问题导致this.numbers.push没生效，咱们一个个说清楚：

问题1：普通函数的this指向错误 #

你在ngOnInit里定义的loadImages是个普通函数，它内部的this并不指向你的MyphotographsComponent组件实例，所以自然找不到this.numbers这个数组。

问题2：push的语法错误 #

push是数组的方法，必须用括号调用（push(1)），而不是用方括号（push[1]），后者是完全错误的语法哦。

推荐的解决方案 #

方案1：使用箭头函数（最简洁推荐） #

箭头函数不会绑定自己的this，它会继承外层上下文的this（也就是组件实例），这样就能正确访问this.numbers了：

export class MyphotographsComponent implements OnInit { 
  numbers = []; 

  ngOnInit() { 
    const loadImages = () => { 
      this.numbers.push(1); // 现在this指向组件实例，语法也正确
    } 
    loadImages(); 
  } 
}

方案2：提前保存组件的this到变量 #

如果一定要用普通函数，可以先把组件实例的this存到一个变量里，比如that，然后在函数里用这个变量访问数组：

export class MyphotographsComponent implements OnInit { 
  numbers = []; 

  ngOnInit() { 
    const that = this; // 保存组件的this
    function loadImages() { 
      that.numbers.push(1); // 用that代替this访问数组
    } 
    loadImages(); 
  } 
}

方案3：把loadImages改成组件的类方法 #

把函数定义成组件的类成员方法，这样方法里的this默认就指向组件实例：

export class MyphotographsComponent implements OnInit { 
  numbers = []; 

  ngOnInit() { 
    this.loadImages(); // 调用类方法
  } 

  loadImages() { 
    this.numbers.push(1); 
  } 
}

任选一种方案修改后，你的数组就能正常添加元素啦！

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