AngularJS ng-repeat 在数组更新时不刷新答案

【问题标题】：AngularJS ng-repeat not refreshing on array updateAngularJS ng-repeat 在数组更新时不刷新
【发布时间】：2017-01-08 13:17:28
【问题描述】：

我有一个问题，即当数组更改时 ng-repeat 没有更新列表。

我正在使用 JavaScript 承诺来计算一个计算，然后返回一个包含 2 个数组的对象。然后这些数组将显示在下面代码 sn-p 的视图中。

<button class="btn" data-toggle="modal" data-target="#tableModal" ng-click="vm.compareTables(vm.table)">Some text</button>
<!-- Modal -->
<div class="modal fade" id="tableModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{ vm.table.title}}</h4>
            </div>
            <div class="modal-body">
                <h4>You got</h4>
                <p ng-repeat="g in vm.got">{{ g }}</p>
                <h4>You dont:</h4>
                <p ng-repeat="d in vm.dont">{{ d }}</p>
            </div>
        </div>
    </div>
</div>

在控制器中，我将一个函数包装在一个 Promise 中，它会返回带有 2 个填充数组的正确答案。我也可以在控制器中打印结果，ng-repeat 只是不更新视图。

var vm = this;

vm.compareTables = function (table) {
    getData().then(function succesCallback(response) {
        vm.ing = response.data;
        var r = table;
        var promise = pro(r, vm.ing);
        promise.then(function (data) {
            console.log(data.got);
            console.log(data);
            vm.got = data.got;
            vm.dont = data.dont;
        });
    });
}

上述承诺返回正确的结果。

如果有帮助，我正在使用 angular 1.6.1。控制器和视图连接到一个组件，它工作正常。

更新

这是承诺返回的控制台输出

【问题讨论】：

您有控制台数据吗？你在获取数据吗？
@AvneshShakya 是的，我添加了控制台输出的图像。无法向您显示数据，但存在数组大小。
pro 函数是什么？
比较两张表的功能。它工作正常。我发现问题可能出在两个组件之间的绑定中。
你为什么将“this”分配给你的 vm 变量，为什么它没有被声明为 $scope.vm = this？

标签： javascript angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

包装您的vm.got = .. in a $scope.$apply(function () { ... }) 以强制使用digest cycle。 Angular 可能不知道您的 promise 回调，因为您可能使用了与 Angular 本机机制不同的 promise/callback 机制（$http、$q、$resource）。

【讨论】：

当将它包装在 $apply 中时，我是否知道摘要周期已经在进行中。
你确定你的js和你的html是同一个控制器吗？
使用本机承诺/回调机制（$http、$q、$resource）为我解决了问题。谢谢。

【解决方案2】：

使用

$timeout(function () {
    vm.got = data.got;
    vm.dont = data.dont;
})

【讨论】：

【解决方案3】：

我希望这对你有帮助。请参阅此链接，如果不清楚，请观看此链接末尾给出的视频。 solve problem of ng-repeat

【讨论】：

【解决方案4】：

当你脱离了角度上下文时，你需要在 promise 回调中使用 $scope.$apply() 方法来更新你的视图。

【讨论】：