问题描述:
在AngularJS中,当使用ng-repeat指令遍历一个由Promise.all方法返回的Promise数组时,ng-repeat无法正确显示数据。
代码示例:
angular.module('myApp', [])
.controller('myController', function($scope, $q) {
var promise1 = $q.resolve('Item 1');
var promise2 = $q.resolve('Item 2');
var promise3 = $q.resolve('Item 3');
Promise.all([promise1, promise2, promise3]).then(function(data) {
$scope.items = data;
});
});
{{ item }}
解决方法:
问题的原因是,ng-repeat指令在Promise.all返回的Promise数组尚未解析完成时就开始执行,因此无法正确显示数据。解决方法是将Promise.all返回的Promise数组包装在一个新的Promise对象中,并在该Promise对象解析完成后再给ng-repeat指令传递数据。
修改后的代码示例:
angular.module('myApp', [])
.controller('myController', function($scope, $q) {
var promise1 = $q.resolve('Item 1');
var promise2 = $q.resolve('Item 2');
var promise3 = $q.resolve('Item 3');
var promises = [promise1, promise2, promise3];
$q.all(promises).then(function(data) {
$scope.items = data;
});
});
{{ item }}
通过将Promise.all返回的Promise数组包装在$q.all方法中,确保数据解析完成后再给ng-repeat指令传递数据,这样就能正确显示数据了。