页面加载几秒钟后打开引导手风琴时，ui-grid是否为空白？

因此，我目前正在尝试动态创建可折叠到包含某些数据的ui-grid的手风琴。问题是，如果我在加载页面的几秒钟内没有展开手风琴，则ui-grid将为空白。该表应存在的轮廓，但没有数据显示。我说被显示是因为数据本身在html中。似乎手风琴隐藏了它？当我调整浏览器窗口的大小时，数据会出现。抱歉，如果这还不够详细，或者我错过了明显的调试步骤，那么我对js / angular和html还是陌生的。以下是我的HTML代码

<div ng-controller="TestController as test">
    <script type="text/ng-template" id="group-template.html">
        <div class="panel-heading">
            <h4 class="panel-title" style="color:#fa39c3">
                <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
                    <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                        TEST
                    </span>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
            <div class="panel-body" style="text-align: right" ng-transclude></div>
        </div>
    </script>
    <uib-accordion close-others="oneAtATime">
        <div ng-repeat="model in myData" track by $index>
            <div uib-accordion-group class="panel-default" is-open="isOpen">
                <uib-accordion-heading>
                    Test Model {{$index}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                </uib-accordion-heading>
                <div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both"></div>
                <br />
                <strong>Last Cell Edited:</strong>{{msg[$index]}}<br />
                <button>Commit Changes</button>
            </div>
        </div>
    </uib-accordion>

和我的角度

(function () {
var app = angular
    .module('testApp', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'ngAnimate'])
    .controller('TestController', TestController);

TestController.$inject = ['$scope', 'uiGridConstants'];

function TestController ($scope, uiGridConstants) {
    $scope.oneAtATime = false;
    $scope.myData = myData;
    $scope.msg = [];
    $scope.gridOptions = [];
    $scope.getGridOptions = function (index) {
        $scope.gridOptions[index] ={
            showColumnFooter: true,
            columnDefs: [
                { field: 'ticker', enableCellEdit: false, width: '33%' },
                { field: 'current_w', aggregationType: uiGridConstants.aggregationTypes.sum, enableCellEdit: false, width: '33%' },
                { field: 'new_w', aggregationType: uiGridConstants.aggregationTypes.sum, width: '33%' }
            ],
            data: myData[index],
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                    $scope.msg[index] = 'Edited Ticker:' + rowEntity.ticker + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
                    $scope.$apply();
                })
            }
        }
    };
    for (i = 0; i < Object.keys($scope.myData).length; i++) {
        $scope.getGridOptions(i);
        console.log($scope.gridOptions[i]);
    };
    console.log($scope.gridOptions[1]);
};

var myData = [
        [{ ticker: 'TICKER', current_w: 5, new_w: 4, },
        { ticker: 'TICKER 2', current_w: 3, new_w: 2, },
        { ticker: 'TICKER 3', current_w: 7, new_w: 0, }],

        [{ ticker: 'TICKER', current_w: 5, new_w: 4, },
        { ticker: 'TICKER 2', current_w: 3, new_w: 2, },
        { ticker: 'TICKER 3', current_w: 7, new_w: 5, }]
];

}）（）;