Angular中<tr>标签*ngFor指令不生效问题求助

嘿，我一眼就瞅到问题根源了——你在subscribe回调里用了普通匿名函数，导致**this指向错位**，组件里的sections数组根本没被正确赋值，页面自然渲染不出<tr>行！

具体原因 #

在JavaScript里，普通function()内部的this会绑定到调用它的上下文（这里是subscribe的回调执行上下文，而非你的ForumComponent实例）。所以你写的this.sections = sections.obj，其实是给这个匿名函数的局部变量赋值，组件本身的sections数组还是空的，Angular检测不到数据变化，当然不会渲染列表。

至于子论坛能正常工作，大概率是子论坛代码里用了箭头函数或者正确处理了this指向，完美避开了这个坑。

修复方案 #

把subscribe里的普通函数换成箭头函数就行，箭头函数不会绑定自己的this，会直接继承外层（也就是ForumComponent实例）的this指向：

修改forum.component.ts里的ngOnInit方法：

ngOnInit(){
  this.forumService.getSections()
    .subscribe((sections:any) => { // 替换为箭头函数
      this.sections = sections.obj;
      console.log(this.sections);
    })
}

备选方案（仅作原理参考，不推荐） #

如果非要用普通函数，可以在回调前先保存组件的this引用：

ngOnInit(){
  const self = this; // 保存组件实例的this
  this.forumService.getSections()
    .subscribe(function(sections:any) {
      self.sections = sections.obj; // 用self替代this
      console.log(self.sections);
    })
}

验证修改 #

改完刷新页面，你会发现控制台依然能输出正确的sections数据，同时页面上的<tr>行应该就能正常渲染出来了。

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