web-dev-qa-db-ja.com

gridOptions.apiが定義されていないため、ag-gridプロパティ 'setRowData'を読み取れません

私はag-gridがプロジェクトで働いています。しかし今、同じものを別のページに移植すると、エラーが発生しました..その間のhttp呼び出しを回避しようとし、直接ROWデータを設定しようとしました

 $scope.gridOptions.api.setRowData(RowDatas);

ただし、エラーは「TypeError：未定義のプロパティ 'setRowData'を読み取れません」です。

だからnデバッグ私はapiが未定義であることに気づきました。これが私の完全なコードです。私が逃したものをチェックしてください..

<head>
<script src="js/angular_1_3_8.js"></script>
<script src="js/angular-filter.js"></script>
<script src="workbench/agGrid/dist/ag-grid.js?ignore=notused34"></script>
<script>
    agGrid.initialiseAgGridWithAngular1(angular);
    var app = angular.module("workbenchApp", ['angular.filter',"agGrid"]);
    app.controller("workBenchCtrl", function ($scope, $http, $filter) {

    var columnDefs = [
    {headerName: "Name", field: "Name"},
    {headerName: "Cr", field: "dc"},
    {headerName: "Ac", field: "da"},
    {headerName: "Mo", field: "dm"},

];

var RowDatas=[{"Name": "SUHDLOG.DAT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:51:22"},
{ "Name": "BOOTLOG.PRV", "dc": "1970-01-01 05:30:00", "da": "2005-04-01 00:00:00", "dm": "2005-04-01 15:13:30"},
{ "Name": "FRUNLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:52:56"},
{ "Name": "COMMAND.COM", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "1999-04-23 22:22:00"},
{ "Name": "BOOTLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2005-04-02 00:00:00", "dm": "2005-04-02 14:38:00"},
{ "Name": "DETLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2002-12-28 00:00:00", "dm": "2002-12-28 09:56:02"},
{ "Name": "CONFIG.SYS", "dc": "1970-01-01 05:30:00", "da": "2005-06-16 00:00:00", "dm": "2003-07-03 18:39:50"},
{ "Name": "DBLSPACE.BIN", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "1999-04-23 22:22:00"},
{ "Name": "MSDOS.SYS", "dc": "1970-01-01 05:30:00", "da": "2003-07-03 00:00:00", "dm": "2002-12-27 10:01:58"},
{ "Name": "DRVSPACE.BIN", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "1999-04-23 22:22:00"},
{ "Name": "MSDOS.---", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:46:28"},
{ "Name": "SETUPLOG.TXT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 10:04:12"},
{ "Name": "WSOCK32.DLL", "dc": "1970-01-01 05:30:00", "da": "2005-06-16 00:00:00", "dm": "2002-12-27 09:47:10"},
{ "Name": "CFGWIZ.DLL", "dc": "1970-01-01 05:30:00", "da": "2005-02-26 00:00:00", "dm": "2002-12-27 09:47:12"},
];

$scope.gridOptions = {
        angularCompileHeaders: true,
        columnDefs: columnDefs,
        rowData:[{"Name": "SUHDLOG.DAT", "dc": "1970-01-01 05:30:00", "da": "2002-12-27 00:00:00", "dm": "2002-12-27 09:51:22"}]
                };

    /*
    $http.get('FileList.json').success(function (response) {
    $scope.TData = response;
    DateArray=$scope.TData.Files;
    $scope.gridOptions.api.setRowData(DateArray);


    });
    */
    $scope.gridOptions.api.setRowData(RowDatas);

    });
</script>
</head>
<body>
<div ng-app="workbenchApp">
    <div ng-controller="workBenchCtrl">
        <div ag-grid="gridOptions" class="ag-blue" style="height: 500px;"></div>
    </div>
</div>
</body>
ag-grid
4
DrVishnu

グリッドAPIは、グリッドが初期化された後にのみ準備が整います。これには、gridReadyイベントを使用できます。

$scope.gridOptions = {
    onGridReady: function() {
        $scope.gridOptions.api.setRowData(...your data);
    }
0
Sean Landsman

メソッドが2回呼び出されたことが原因と思われる同じ問題が発生しました。 APIが定義される前に初めて、内部コードを作成するとクラッシュしました。 2番目のパスで、APIが定義されました。

OnGridReadyは私には機能せず、vueのnextTickやtimeoutも使用しませんでした。

最終的にifを使用してそれを解決しました：

if (this.gridOptions.api) {
    this.gridOptions.api.setFilterModel(null);
}

これにより、最初は通過してクラッシュせず、2回目にキャッチして作業を行うことができました。

（これが誰かを助けることを願っています。私にかなりの欲求不満を引き起こしました。）

2
Jhade SaGrave

これを試して ：

 onGridReady: function(params) {
            params.api.setRowData(...your data);
        }
1
Israel Neves