Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何防止阵列更新时在角度_Javascript_Angularjs - Fatal编程技术网

Javascript 如何防止阵列更新时在角度

Javascript 如何防止阵列更新时在角度,javascript,angularjs,Javascript,Angularjs,在angular中,我试图通过轮询REST服务(本地托管)并使用新检索到的内容更新我的数组来保持页面的实时性,如下所示: JS angular.module("WIMT").controller('overviewController', function ($scope,$interval,$http){ var reg = this; var promise; reg.teacherInfoList = []; reg.dayfilter = ""; $scope.start = f

在angular中,我试图通过轮询REST服务(本地托管)并使用新检索到的内容更新我的数组来保持页面的实时性,如下所示:

JS

angular.module("WIMT").controller('overviewController', function ($scope,$interval,$http){
var reg = this;
var promise;

reg.teacherInfoList = [];

reg.dayfilter = "";


$scope.start = function() {
    $scope.stop();

    promise = $interval( $scope.longPolling, 3000);
};

$scope.stop = function() {
    $interval.cancel(promise);
};

$scope.longPolling = function(){

    reg.teacherInfoList.length = 0;

        $http({
            method: 'GET',
            url: 'api/schedules/' + "TPO01"
        }).then(function onSuccessCallback(response) {

            reg.teacherInfoList[0] = response.data;
            console.log(reg.teacherInfoList[0]);

            $scope.start();
        }, function errorCallback(response) {
            $scope.start();
        });
}


$scope.start();

});
HTML

<div ng-controller="overviewController as oc">

<ul>
    <li ng-repeat="teachInfo in oc.teacherInfoList ">
        {{teachInfo.fullname}}

        <div ng-repeat="day in teachInfo.days | filter: oc.dayfilter">
            Today is: {{day.day}} {{day.date}}

            <ul ng-repeat="roster in day.entries">
                <li>
                    Name: {{roster.name}}
                </li>
                <li>
                    Start: {{roster.start}}
                </li>
                <li>
                    End: {{roster.end}}
                </li>
                <li>
                    Note: {{roster.note}}
                </li>
            </ul>

        </div>

    </li>
</ul>
此代码还会导致闪烁:

 reg.teacherInfoList[0] = response.data;
 reg.teacherInfoList.splice(0,1);
 reg.teacherInfoList.splice(0,0,response.data);
我还尝试将此应用于我的ng重复:

ng-cloack
并将其应用于我的ng重复

track by $index
我也读过:

现在,我知道当我更换阵列一秒钟时,阵列是空的,导致它闪烁,但我想不出解决这个问题的方法。解决这个问题的最好办法是什么

reg.teacherInfoList.length = 0;
不确定此处是否需要清空阵列。 我相信teacherInfoList数组在整个请求期间都是空的,导致它呈现为空。 您可以尝试删除(或注释掉)上面的行,或将其移动到GET请求的回调函数顶部,如

    }).then(function onSuccessCallback(response) {
        // applied here
        reg.teacherInfoList.length = 0;
        reg.teacherInfoList[0] = response.data;
        console.log(reg.teacherInfoList[0]);

        $scope.start();
    }, function errorCallback(response) {
        //and here
        reg.teacherInfoList.length = 0;
        $scope.start();
    });

只有在新响应没有相同id的记录时,才可以尝试修改值而不删除行。闪烁是否每3秒发生一次?是页面上的信息在闪烁吗?通过克隆DOM元素的最后一个状态,并在闪烁发生时无缝地将其磨光以显示,可能会产生闪烁不发生的错觉;我之所以添加该部分,是因为ng repeat无法处理重复项。