0
각도 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>
여기 내 코드입니다 스택 오버플로 관련 질문에 아무 소용이 없으며 dtInstance를 사용하여 테이블을 완전히 다시 렌더링 할 필요가 없습니다. 어떤 도움이라도 대단히 감사하겠습니다.
는 의도와 실제 결과 여기에 제공된 제한된 코드에서 분명 아니다. 당신이 코드를 편집하고 무슨 일이 일어나고 있는지를 보여주는 [mcve]를 제공하면 질문에 대한 답변을받을 가능성이 더 커집니다. – Claies