【问题标题】:Reloading angular table when new data is received收到新数据时重新加载角度表
【发布时间】:2017-08-04 00:18:54
【问题描述】:

当收到来自 websocket 的数据时,我需要填充一个角度表:我尝试过:

<div ng-controller="MyCtrl" ng-app="myapp">
        <table ng-table="commentsTable">
            <tr ng-repeat="item in obj track by $index">
            <td class="plantCell">{{item.nome}}: </td>
            <td class="statusCell">{{item.status}}</td>
            <td class="statusCell">{{item.testo}}</td>
        </tr>
        </table>
        </div>
<script>
    var app=angular.module('myapp', []);
    var printOperation;
    function GetFromLocalStorage(key) {
        var items=localStorage.getItem(key);
        console.log(items);
        if (items===null){
            console.log("item null");
            return null;
        } else {
            if (typeof items!= "string") {items = JSON.stringify(items);}
                    return items;
        }
    }
    app.controller('MyCtrl',    
                function ($scope) {
                    $scope.printComments=function (){
                        $scope.obj=GetFromLocalStorage("AllComments");
                        console.log("ricevo evento e ricarico tabella");
                        console.log($scope.obj);
                        //$scope.commentsTable.reload();
                    }

                    console.log("assegno print operation");
                    printOperation=$scope.printComments;
                }
            );  
            var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
            var eventer = window[eventMethod];
            var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
            eventer(messageEvent,function(e) {
                console.log("ricevo messaggio");
                printOperation();
            },false);
<script>

未捕获的类型错误:无法读取未定义的属性“重新加载” 在 $scope.printComments ((index):68) 在(索引):80

【问题讨论】:

    标签: javascript angularjs html-table


    【解决方案1】:

    如果您使用的是ngTable,则应将其注入您的应用模块,如angular.module("myapp", ["ngTable"]);

    更新: 所以在讨论了这个问题并获得了更多的上下文之后,我可以假设数据是在事件监听器中的 AngularJS 上下文之外修改的,所以视图不会显示更新的值,所以我假设用$applyAsync 包裹printOperation 应该会有所帮助:

    printOperation = $scope.$applyAsync($scope.printComments);
    

    另外我认为逻辑应该在一个地方——例如在控制器内部,因为它会使代码更具可读性和可维护性。

    【讨论】:

    • 我该如何重新加载它? angular.module("myapp", ["ngTable"]).reload();产生相同的错误。 Moeover 我在模块内部,我不需要引用它。此外,每次收到新推送时我都需要更新它。
    • 你需要在var app=angular.module('myapp', ['ngTable']);这一行注入它。但是你真的在使用ngTable吗?因为您还需要将NgTableParams 注入您的控制器并正确初始化它们以与ng-table 指令一起使用。或者您想简单地使用ng-repeat 呈现表格?为什么你需要打电话给reload()?只需更新 $scope.obj 就可以了。
    • 不幸的是它没有,如果我在表变为空后更新 obj 数据到达时不会显示任何内容。每次服务器通过 websocket 提交更新的数据时,我都需要更新表。也许如果我在第一次完成时动态创建表,但是当我需要再次更新表时,我又回到了开头。
    • console.log($scope.obj); 是否显示更新的数据?您是否也可以尝试暂时删除track by,看看它是否起到了作用?
    • 此外,如果我插入 ['ngTable'] 我得到错误:[$injector:modulerr]
    猜你喜欢
    • 2019-08-08
    • 1970-01-01
    • 2018-11-20
    • 1970-01-01
    • 2019-01-15
    • 2019-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多