web-dev-qa-db-ja.com

UIグリッド角度、グリッドはレンダリングされますが、データは表示されません

ここで何が欠けていますか？グリッドはエラーなしでレンダリングされ、行は空白になります...確認したところ、JSONはこの時点まで正常に機能しています$scope.gridOptions.data = response['data'];空の配列をレンダリングし、実際のデータに到達しないようです...

  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.myData = [];
        $scope.loading = true;

        $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
              { name: 'Id', field: 'PK_Inspection' },
              { name: 'Employee Id', field: 'EmployeeId' },
              { name: 'Employee Name', field: 'EmployeeName' },
              { name: 'Equipment Id', field: 'EquipmentId' },
              { name: 'Equipment Name', field: 'EquipmentName' },
              { name: 'Sequence', field: 'SequenceName' },
              { name: 'Details', field: 'SequenceDetails' },
              { name: 'Type', field: 'SequenceTypeName' },
              { name: 'Shift', field: 'ShiftName' },
              { name: 'Status', field: 'StatusName' }
            ],
            data:[]
        };

        $http.get('/Home/GetAllData')
            .then(function (response) {
                $scope.gridOptions.data = response['data'];
            })
            .catch(function (err) {
                $scope.loading = false;
                console.log("Error Receiving Data.");
            })
            .finally(function () {
                $scope.loading = false;
                console.log($scope.gridOptions.data);

            });

    }]);

$scope.gridOptions.dataに渡されるデータ：

[
    {
        "PK_Inspection": 1,
        "EmployeeId": "4433112",
        "EmployeeName": "",
        "EquipmentId": "1122113",
        "EquipmentName": "",
        "SequenceName": "UNIT 1",
        "SequenceDetails": "Bent, Dented, Broken, Torn or Deformed Parts.",
        "SequenceTypeName": "Visual Inspection",
        "ShiftName": "Day",
        "StatusName": "OK"
    },
    {
        "PK_Inspection": 2,
        "EmployeeId": "4433112",
        "EmployeeName": "",
        "EquipmentId": "1122113",
        "EquipmentName": "",
        "SequenceName": "UNIT 2",
        "SequenceDetails": "Charge, Water Levels, Vent Caps in place, Power Disconnect works.",
        "SequenceTypeName": "Visual Inspection",
        "ShiftName": "Day",
        "StatusName": "OK"
    }
]

HTMLは次のとおりです。

<div ng-controller="MainCtrl">
    <i class="fa fa-spinner fa-spin text-center" ng-show="loading"></i>
    <div id="mainGrid" ui-grid="gridOptions" ui-grid-edit class="myGrid"></div>
</div>

スクリーンショット

enter image description here

angularjsangular-ui-grid
8
Dayan

私はそれを理解しました、そして私の問題は2つのものの混合であったようです。

  1. 着信JSONは文字列でした。JSON.parseを使用してオブジェクトに変換し、それを$scope.gridOptions.dataに渡す必要があるかどうかは、100％わかりませんが、それが問題であった可能性があります。上記の元の質問に投稿したコード。

  2. さらに調査した結果、公式のAngular UIグリッドドキュメントで非常に詳細な例を見つけました。この手法に従って、データを正しくレンダリングすることができました。

    var rowCount = 0;
var i = 0;
$scope.refreshData = function () {
    $scope.loading = true;
    $scope.myData = [];

    $http.get('/Home/GetAllData')
        .success(function (response) {
            var jsonObj = JSON.parse(response);
            rowCount = jsonObj.length;

            jsonObj.forEach(function (row) {
                row.id = i; i++;
                $scope.myData.Push(row);
            });
            $scope.loading = false;

        })
        .error(function() {
            $scope.loading = false;
            console.log("Error retrieving data.");
        });
 };

この例では、gridOptions.dataのmyDataという文字列値を使用します。これは、監視するスコープ上のオブジェクトを参照します。つまり、GETリクエストが完了したら、各行をプッシュするだけです。

完全な例は ここ Punklr経由です。

5
Dayan

以下のコードは機能しましたが、データを変更したら、以下のコードを呼び出します

if ($scope.gridApi ) {
       $scope.$timeout(() => {
          $scope.gridApi.core.handleWindowResize();
          $scope.gridApi.grid.refresh();
       }, 10);
}
0
Diwakar