AngularJs - 使用“控制器作为”语法的 ag-grid rowData

Posted 2023-03-28

技术标签:

【中文标题】AngularJs - 使用“控制器作为”语法的 ag-grid rowData【英文标题】：AngularJs - ag-grid rowData using "controller as" syntax 【发布时间】：2020-06-20 14:14:08 【问题描述】：

[更新]This Plunker 做我想做的事，但是：

ui-grid

ag-grid

我认为这些更改会很简单，并且会在我大约 14 小时后回到家时尝试将它们应用到我的代码中。

如果有人想要分叉 Plunk 并进行这些更改，我将奖励赏金，因为对于其他想要做同样事情的人来说，这是一个很好的基本起点演示，因此 Plunker 将提供一般帮助。

我非常接近，但是

无法读取未定义的属性“setRowData”（由“<ui-view class="ng-scope ng-binding">”引起）“TypeError：无法读取未定义的属性“setRowData”

我使用的是“controller as”语法，因此是Self; (Self = this;)。这工作正常，我的问题是当我尝试在 ui-router 状态的 templateURL 中为 ag-grid 设置 rowData 时。

要发布的内容很多，但相关内容如下：

<div id="currentCandidatesGridDiv"
     ag-grid="Search_result_controller.currentCandidatesGrid" 
     class="ag-theme-balham red_border"
     style="height: 30%; width:90%">
</div>

// lookup the container we want the Grid to use
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGridDiv');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);

Self.currentCandidatesGrid =

    columnDefs: [
        headerName: "Candidate", field: "candidate_name", sortable: true ,
        headerName: "Skills", field: "skills", sortable: true ,
        headerName: "Start date", field: "start_date", sortable: true 
    ],
    rowData: [],  
    pagination: true,
    paginationAutoPageSize: true,
;

我对@987654336@ 是否正确，或者我应该使用rowData: <someVariable>？

然后我将行数据计算到一个数组中，Self.currentCandidatesGridRowData。

当我尝试Self.currentCandidatesGrid.api.setRowData(Self.currentCandidatesGridRowData); 时，我收到上面显示的错误。

我搜索了，但找不到使用 controller as 语法的工作 Plunker。

[骗子] 1）“骗子”问题没有答案，所以对我没用 2) 我的问题是关于使用Self.xxxGrid.api.setRowData(Self.xxxGridRowData); 和`controller 作为语法。请立即打开。谢谢

【问题讨论】：

我看到您使用的是gridOptions 对象，而不是直接使用api 对吗？如果是这样 - 您需要在 gridReady 函数中绑定 api ，然后您就可以使用任何方法。听起来像 ann aswer :-) 你能告诉我怎么做吗？请分享完整的代码控制器以确保我不需要完整代码，只需要与网格初始化和正在使用的html相关（你也可以截图）我推荐你使用 gridReady 事件 (ag-grid.com/javascript-grid-events)。这确实是知道 api 对象已设置的唯一可靠替换。在您的回调中，您可以安全地访问 ag-grid api。例如：onGridReady: function () gridOptions.api.sizeColumnsToFit(); 【参考方案1】：

使用“控制器 As”语法的 AngularJS 的 ag-Grid 演示

当 ag-Grid 脚本加载时，它不会向 AngularJS 1.x 注册。这是因为 AngularJS 1.x 是 ag-Grid 的可选部分，你需要告诉 ag-Grid 你想使用它：

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])

有关详细信息，请参阅

Ag-Grid Documentation - Basic AngularJS 1.x Example

The DEMO on PLNKR

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])
.controller("exampleCtrl", function() 

    var columnDefs = [
        headerName: "Make", field: "make",
        headerName: "Model", field: "model",
        headerName: "Price", field: "price"
    ];

    var rowData = [
        make: "Toyota", model: "Celica", price: 35000,
        make: "Ford", model: "Mondeo", price: 32000,
        make: "Porsche", model: "Boxter", price: 72000
    ];

    this.gridOptions = 
        columnDefs: columnDefs,
        rowData: rowData
    ;

)

html, body 
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;

html 
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    overflow: auto;

body 
    padding: 1rem;
    overflow: auto;

<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>

<body ng-app="example" ng-controller="exampleCtrl as $ctrl"
      style="height: 100%">

    <div ag-grid="$ctrl.gridOptions" class="ag-theme-balham"
         style="height: 100%;">
    </div>

</body>

【讨论】：

这行得通（显然）。现在把它翻译成我的应用程序;-) 谢谢和my answer问题AngualrJs: ag-grid in a ui-router view templateUrl中的第3部分演示相同。我只是将模板和控制器更改为使用“控制器作为”语法。你显然知道你的东西！我是自学成才，但试图“正确”地做事，重构我现有的 SPA 以使用路由。我会考虑切换到 Angular，但知道足够多的 AngularJs 可以应付，很快就会切换到 Dart/Flutter。再次感谢！ :-)【参考方案2】：

我对@987654324@: [] 是否正确，或者我应该有rowData: <someVariable>？

你甚至可以忽略gridOptions中的这个属性，但不同的是：如果您将 rowData 定义为一个空数组 - 网格将呈现处理它为 'No rows to show'，但如果您不定义它，网格将显示 'Loading...' -这更正确，有一个延迟的请求案例。

此外，您可以自己处理叠加逻辑以获取更多详细信息check here。

现在，正如我在 cmets 中所说的

无法读取未定义的属性“setRowData”

这个问题可能是由于使用了错误的参考文献造成的。

首先，请查看this answer 和 ag-grid 开发人员评论。

其次，关于问题本身：

.controller('yourController', [function() 
  var Self = this;  // here's your controller reference

  // then you will have columns and rowData (probably) 
  // but the most important part is here
  Self.currentCandidatesGrid = 
      ... // anything that you need
     onGridReady: gridReady // major point for future api reference
  

  function gridReady(params)
     Self.gridApi = params.api;
     Self.columnsApi = params.columnsApi;
  

]);

在gridReady 之后，您将能够通过Self.gridApi 使用网格API 方法

Demo

【讨论】：

以上是关于AngularJs - 使用“控制器作为”语法的 ag-grid rowData的主要内容，如果未能解决你的问题，请参考以下文章

Angularjs：'控制器作为语法'和$ watch

如何使用量角器测试控制器作为语法？

JavaScript |角 |控制器作为语法：不能使用 `this`

控制器作为语法不使用角度1.4.5 var vm =此模板未显示

AngularJS1.X学习笔记6-控制器和作用域

AngularJS基础语法