页面加载时未显示角度 ng 重复

Angular ng-repeat not showing on page load

本文关键字:ng 重复 显示 加载      更新时间:2023-09-26

我以前从未遇到过这个问题,但我有一个 Angular 控制器,它可以从 SignalR HUB 中提取客户端连接数据列表并将其显示在状态页面上。 这是非常简单的事情。

我的问题是:当页面加载时,控制器运行并正确检索数据,但它不会显示在页面上,直到我做一些"推挤"角度的事情,比如单击过滤器文本框,然后单击它。 我实际上不必做任何更改数据的事情。 我已经设置了一个断点,并验证了数据是否已正确加载,并且是否正在将其分配给范围。 我还尝试在数据加载后立即使用 $scope.$apply((,但它没有任何影响。 这是相关代码:

控制器:

angular.module('statusModule', ['utilitiesModule']).
    controller('statusController', ['$scope', '$location', 'Util',
    function ($scope, $location, Util) {
        var gurcaHub = $.connection.gurcaHub;
        var indexes = {};
        var clients = [];
        $scope.search = { domain: '' };
        var refreshClientList = function () {
            gurcaHub.server.getClients("", 0).done(function (result) {
                angular.forEach(result, function (item) {
                    // omitted for brevity, all this does is massage the data a bit 
                    clients.push(item);
                });
                $scope.clients = clients;
            });
        };

        angular.element(document).ready(function () {
            $.connection.hub.error(function (error) {
                $scope.errorMsg = error;
            });
            $.connection.hub.start().done(function () {
                gurcaHub.server.connectManager({ ManagerToken: "123" }).done(function () {
                    refreshClientList();
                });
            });
        });
    }]);

这是相关的 HTML:

<div class="panel panel-default" ng-repeat="item in clients | filter:search">
        <div class="panel-heading">
            <h3 class="panel-title">{{item.domain}} <span class="badge">{{item.numClients}}</span></h3>
        </div>
        <div class="panel-body">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Machine Name</th>
                        <th>Client ID</th>
                        <th>IP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="client in item.clientList">
                        <td>{{client.Type}}</td>
                        <td>{{client.MachineName}}</td>
                        <td>{{client.ClientId}}</td>
                        <td>{{client.Ip}}</td>
                    </tr>
                </tbody>
            </table>            
        </div>
    </div>

我确实删除了过滤器,但我仍然有同样的问题。 同样,我所要做的就是单击表单输入字段,然后再次将其取消聚焦,一切都会显示出来。 我不必输入任何东西。 数据就在那里,只是在你做某事之前不会显示出来。

angular.forEach之后的赋值 ( $scope.clients = clients; ( 在循环完成之前执行。

尝试

....
    function ($scope, $location, $q, Util) {
    ...
        var refreshClientList = function () {
            gurcaHub.server.getClients("", 0).done(function (result) {
                angular.forEach(result, function (item) {
                    // omitted for brevity, all this does is massage the data a bit 
                    clients.push(item);
                });
                // execute when done processing
                $q.all(clients).then(function(){
                    $scope.clients = clients;
                });
            });
        };
...
}]);