_.each循环中this的作用及Angular Material模态框数据显示问题求助

我完全懂你现在的困惑——本来想通过加this来访问组件数据，结果反而触发了“无法找到undefined的listOfPaths”错误，这种上下文指向的问题确实很容易绕进去。咱们来一步步拆解和解决这个问题：

核心原因：嵌套_.each中this的指向偏移 #

Lodash的_.each方法如果使用普通函数作为回调，this的上下文会默认指向全局对象（浏览器里是window），而不是你的Angular组件实例。当你在嵌套循环里加了this后，实际上是在访问一个不存在于全局对象的listOfPaths，自然就会报错。

几种可行的解决方案 #

1. 用箭头函数锁定this指向

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的组件实例）。这是最简洁的解决方式：

// 替换原来的嵌套_.each写法
_.each(yourParentArray, (parentItem) => {
  _.each(parentItem.childItems, (childItem) => {
    // 这里的this稳定指向组件实例，可正常访问this.listOfPaths
    console.log(this.listOfPaths);
    // 你的其他逻辑代码
  });
});

2. 显式给_.each绑定上下文

如果坚持要用普通函数回调，可以利用_.each的第三个参数，手动传入组件的this作为回调的上下文：

_.each(yourParentArray, function(parentItem) {
  _.each(parentItem.childItems, function(childItem) {
    console.log(this.listOfPaths);
  }, this); // 给内层循环绑定组件this
}, this); // 外层循环也要绑定组件this

3. 提前保存组件this到变量

在循环前把组件的this存到一个局部变量（比如that），之后在循环里用这个变量访问组件属性：

const that = this; // 提前保存组件实例的引用
_.each(yourParentArray, function(parentItem) {
  _.each(parentItem.childItems, function(childItem) {
    console.log(that.listOfPaths); // 用that代替this访问
  });
});

额外检查点 #

除了this的问题，还要确认这两点：

• 确保listOfPaths在组件中已经被正确初始化（比如在ngOnInit里赋值，或者从服务获取后已赋值），不是undefined或null。
• 如果模态框是通过MatDialog打开的，要确认数据是否正确传递给了模态框组件（如果是独立的模态框组件），比如通过data参数传递：

  // 打开模态框时传递数据
  this.dialog.open(YourModalComponent, {
    data: { listOfPaths: this.listOfPaths }
  });
  

  然后在模态框组件里通过MAT_DIALOG_DATA注入获取：

  constructor(@Inject(MAT_DIALOG_DATA) public data: { listOfPaths: YourType }) {}
  

调整完之后，刷新页面看看控制台的错误是否消失，模态框里的数据应该就能正常显示了。

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