AngularJS组件向视图传递数据失败：API返回数据无法渲染问题求助

我来帮你梳理下问题出在哪，以及怎么修复：

核心问题1：异步请求的处理错误 #

你的getInformation函数里用了$http.get，这是异步操作——它返回的是一个Promise对象，而不是直接的服务器响应数据。而且你只是在回调里return responseState.data，但并没有把这个数据存到组件的变量里，模板自然拿不到数据。

核心问题2：模板里的语法错误 #

• ng-repeat="i in vm.getInformation"：ng-repeat需要遍历一个数组/集合，但你这里写的是一个函数，根本没法循环。
• {{ vm.getInformation().data[i].Date }}：就算函数能执行，它返回的是Promise，不是数据对象，而且这种写法会让AngularJS不断重复调用这个函数，导致性能问题+拿不到正确数据。

修复步骤 #

第一步：修改组件代码，把数据绑定到组件变量

更新你的component.js，把获取到的数据存到$ctrl的一个属性里，比如informationList，同时在组件初始化的时候调用这个方法：

// component.js
$ctrl.$onInit = function() {
  // 组件初始化时就获取数据
  $ctrl.getInformation();
};

$ctrl.getInformation = function() {
  $http.get(`path/to/getInformation/${$ctrl.path.idTo}`).then(function(responseState) {
    console.log('sucessfull callback from server', responseState.data);
    // 把数据赋值给组件的变量，这样模板就能访问到了
    $ctrl.informationList = responseState.data;
  });
};

第二步：修改模板，正确遍历绑定的数据

更新你的template.html，直接遍历组件里的informationList变量，然后读取对应的属性：

<!-- template.html -->
<tr ng-repeat="item in $ctrl.informationList">
    <td>{{ item.Date }}</td>
    <!-- 如果还有其他属性，直接用item.xxx即可 -->
    <td>{{ item.OtherProperty }}</td>
</tr>

额外说明 #

• AngularJS的双向绑定是基于组件（或控制器）的变量的，所以必须把异步获取的数据赋值给$ctrl（或$scope）上的属性，模板才能感知到数据变化并渲染。
• 不要在模板里直接调用异步函数，这会导致重复执行、内存泄漏，而且根本拿不到正确的异步结果。

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