AngularJS 1.6中ng-repeat失效求助：gamesGrid组件无法渲染数据

看起来你遇到了AngularJS组件中ng-repeat无法渲染数据的问题——虽然控制台能正常打印数据，但视图就是不显示内容。我帮你排查了一下，主要有两个关键问题需要修复：

问题1：回调函数中的this指向错误 #

在gamesGridController的$postLink方法里，当你在fetchUserDetails().then()的回调函数中给this.gamesDetails赋值时，这里的this已经不再指向控制器实例了。回调函数会创建自己的上下文，所以你实际上是在给回调函数内部的临时变量赋值，而非控制器的gamesDetails属性，这就导致视图无法获取到更新后的数据。

解决办法（三种任选其一）： #

1. 使用ES6箭头函数：箭头函数不会绑定自己的this，会继承外部上下文的this（也就是控制器实例）：

this.$postLink = function() {
  this.gamesDetails = [];
  gridDataFactory.fetchUserDetails().then((response) => {
    this.gamesDetails = response;
    console.log(this.gamesDetails);
  });
}

2. 提前保存控制器的this到变量：

this.$postLink = function() {
  var vm = this; // 保存控制器的this到vm变量
  vm.gamesDetails = [];
  gridDataFactory.fetchUserDetails().then(function(response) {
    vm.gamesDetails = response; // 使用vm访问控制器属性
    console.log(vm.gamesDetails);
  });
}

3. 用.bind(this)绑定回调的上下文：

this.$postLink = function() {
  this.gamesDetails = [];
  gridDataFactory.fetchUserDetails().then(function(response) {
    this.gamesDetails = response;
    console.log(this.gamesDetails);
  }.bind(this)); // 绑定this为控制器实例
}

问题2：模板中未使用组件控制器的别名 #

AngularJS组件默认的控制器别名是$ctrl（如果你没有手动设置controllerAs），而你的模板里直接写了ng-repeat="detail in gamesDetails"，视图无法找到这个变量——因为它属于控制器实例，必须通过别名来访问。

解决办法： #

修改模板中的ng-repeat语句，加上控制器别名：

<tbody>
  <tr ng-repeat="detail in $ctrl.gamesDetails">
    <td>{{detail.title}}</td>
    <!-- 可以补充其他列的渲染，比如： -->
    <td>{{detail.platform}}</td>
    <td>{{detail.score}}</td>
    <td>{{detail.genre}}</td>
    <td>{{detail.editors_choice}}</td>
  </tr>
</tbody>

额外检查点 #

• 确认gridDataFactory返回的数据是结构正确的数组（从你控制台能打印数据来看，这部分应该没问题，但可以验证下每个元素都包含title、platform等所需属性）。
• 确保组件已正确注册到myApp模块，且在index.html中正确使用了<games-grid></games-grid>标签。

把这两个问题修复后，你的ng-repeat应该就能正常渲染游戏数据了。

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