ui-grid的罕见错误

Question

我在我的项目中实现了这个ui-grid，但是在调整大小窗口事件发生之前它没有呈现任何内容，那么只有列名可见，而不是数据

  

HTML

<div ui-grid="shipment.shipmentObject.EventsGridOptions" class="grid"></div>

  

这是角度控制器

vm.shipmentObject.events=[];
vm.shipmentObject.commodities=[];
vm.shipmentObject.CommoditiesGridOptions=[];
vm.shipmentObject.EventsGridOptions=[];

    ShipmentResource.getShipment(vm.selectedShipment).then(function(resp)
                {

                    console.log('resp.data', resp.data);
                    console.log('resp.data', resp.data.shipmentExternalId);

                    vm.shipmentObject = resp.data;
                    console.log(vm.shipmentObject);



ShipmentResource.getEvents(vm.selectedShipment).then(function(response){
                            vm.events=response.data;
                            console.log(response);
                            console.log("events",vm.shipmentObject.events);
                            console.log(vm.events);

            vm.shipmentObject.EventsGridOptions = { 
            enableSorting: true,
            data:vm.events,
            columnDefs: [


{field:'shipment_id', displayName:'Shipment ID'},
        {field:'people_id', displayName:'People ID'},
        {field:'date', displayName:'Date'},
        {field:'last_status', displayName:'Last Status'},
        {field:'current_status', displayName:'Current Status'}
                                ]
                        };
            });

Answer 1

在发出任何请求之前尝试配置网格，然后在拥有数据时设置数据（而不是在数据完成之前完全配置数据）。

我假设您收到控制台错误，因为无法读取未定义的属性... 这是因为网格无法自行配置。

如果要隐藏网格，请使用the link to my code: https://codepen.io/BeauBo/pen/gxmpLK?editors=1111

ng-show="shipment.shipmentObject.EventsGridOptions.length > 0"

我也会删除它们。 gridOptions是一个对象{}，而不是一个数组[] 。应该初始化这两个网格，至少应该使用数据属性。

vm.shipmentObject.EventsGridOptions = {
        enableSorting: true,
        data: [],
        columnDefs: [ // abbreviated. all of your defs here ]
};

ShipmentResource.getShipment(vm.selectedShipment)
  .then(function(resp) {

      vm.shipmentObject = resp.data;

      ShipmentResource.getEvents(vm.selectedShipment)
      .then(function(response) {
          vm.events = response.data;
          vm.shipmentObject.EventsGridOptions.data = vm.events;
      });

这是他们应该如何初始化：

vm.shipmentObject.CommoditiesGridOptions=[];
vm.shipmentObject.EventsGridOptions=[];