angular-datatables - 当在组件控制器中调用 $onChanges 事件时，ng-repeat 不会用新行更新数据表

Posted 2023-02-23

【中文标题】angular-datatables - 当在组件控制器中调用 $onChanges 事件时，ng-repeat 不会用新行更新数据表

【英文标题】：angular-datatables - ng-repeat does not update datatable with new rows when $onChanges event called in component controller

【发布时间】：2017-03-15 03:23:25

【问题描述】：

我已经制作了一个 angular-datatable 组件以在我的项目中使用（使用 angular 1.5），并将其填充的数据（角度方式）绑定到在父范围内更新的对象数组。更改父范围值后，将调用 $onChanges 事件并更新绑定数据，但表中的行不会通过 ng-repeat 更改以反映更新——在最初绘制表后，不能进行任何更改随后的数据变化可见。这是我的代码：

JS：

angular.module('datatable').
component('datatable', 
  bindings: 
    graphData: '<',
    tableId: '=',
    divId: '='
  ,
  templateUrl: 'components/graphs/datatable.template.html',
  controller: function datatableController (DTOptionsBuilder, DTColumnBuilder) 
        let self = this;
        self.tableKeys = Object.keys(self.graphData[0])

        self.$onChanges = function () 

            self.dtOptions = 
                paginationType: 'full_numbers',
                displayLength: 30,
                dom: 'Bfrtip',
                buttons: [
                    extend: 'excelHtml5',
                    'copy'
                ],
                scrollY: 450,
                scrollX: '100%',
                scrollCollapse: true,
            ;
        ;
    
)

HTML（组件）：

<datatable graph-data="$ctrl.submittedResults" table-id="'allDataTableResults'" div-id="'allDataTable'"></datatable>

HTML（模板）：

<div class="col-md-10 col-md-offset-1">
    <div class="well well-lg" style="background: white">
        <div id="$ctrl.divId" style="width: 100%; height: 700px; display: block; margin: 0 auto">
            <table datatable="ng" dt-options="$ctrl.dtOptions"
            class="table table-striped table-bordered" cellspacing="0">
                <thead>
                    <tr>
                        <th ng-repeat="key in $ctrl.tableKeys">key</th>
                   </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in $ctrl.graphData">
                        <td ng-repeat="val in row">val</td>
                    </tr>
                </tbody>
        </table>
    </div>
</div>

我已经尝试了我在 Stack Overflow 上的相关问题中看到的所有内容，但无济于事，而且我没有运气完全使用 dtInstance 重新渲染表格。任何帮助将不胜感激。

【问题讨论】：

从这里提供的有限代码来看，预期和实际结果并不明显。如果您 edit 您的代码并提供显示正在发生的情况的 minimal reproducible example，您将更有可能收到问题的答案。

【参考方案1】：

v0.5.5 不允许在控制器变量名中使用 '$' 字符，不幸的是，这是 Angular 组件中的默认值。将其覆盖为解决方法，例如控制器作为：ctrl

https://github.com/l-lin/angular-datatables/blob/v0.5.5/dist/angular-datatables.js#L892

报告了这个问题：https://github.com/l-lin/angular-datatables/issues/916