加载编辑弹出窗口时 ngx-datatable 非常慢
ngx-datatable very slow when load edit popup
我有这样的 ngx 数据table,我可以编辑弹出窗口中的每一行,一切正常,直到我到达结果的第二页,这很神奇,当我单击要编辑的行时,我发现editCustomer 方法中的断点但弹出窗口中的数据仅在 5 秒后刷新,我可以检查什么?
<ngx-datatable class="material colored-header sm table table-striped table-hover"
[loadingIndicator]="loadingIndicator"
[rows]="customers"
[rowHeight]="35"
[headerHeight]="35"
[footerHeight]="35"
[columns]="columns"
[scrollbarV]="true"
[rowClass]="getRowClass"
[columnMode]="'force'">
</ngx-datatable>
<ng-template #indexTemplate let-value="value">
<strong>{{value}}</strong>
</ng-template>
<ng-template #actionsTemplate let-row="row" let-value="value" let-i="index">
<a class="btn btn-link btn-xs" href="javascript:;" (click)="editCustomer(row)"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
</ng-template>
<div class="modal fade" bsModal #editorModal="bs-modal" (onHidden)="onEditorModalHidden()" [config]="{backdrop: 'static'}" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left"><i class="fa fa-shield"></i> Customer Details </h4>
<button type="button" class="close pull-right" title="Close" (click)="editorModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<customer-editor #customerEditor></customer-editor>
</div>
</div>
</div>
</div>
</div>
在我的 ts 文件中
editCustomer(row: Customer) {
this.customerEditor.editCustomer(row);
this.editorModal.show();
}
customerEditor 是
@ViewChild('customerEditor')
customerEditor: CustomerEditorComponent;
并在 customerEditor 中
editCustomer(customer: Customer) {
if (customer) {
this.customerEdit = new Customer();
Object.assign(this.customerEdit, customer);
}
并且在 customerEdit 视图中只有 {{customerEdit.name}}
而且,这很奇怪,但是如果转到 table 中的第二页,则弹出窗口会在 4 -5 秒后刷新数据。
比如在 table 中更改页面会在 angular 中暂停绑定几秒钟。
ok 我找到问题了,这是 lib 问题,最新版本已修复该问题
https://github.com/swimlane/ngx-datatable/issues/1321
我有这样的 ngx 数据table,我可以编辑弹出窗口中的每一行,一切正常,直到我到达结果的第二页,这很神奇,当我单击要编辑的行时,我发现editCustomer 方法中的断点但弹出窗口中的数据仅在 5 秒后刷新,我可以检查什么?
<ngx-datatable class="material colored-header sm table table-striped table-hover"
[loadingIndicator]="loadingIndicator"
[rows]="customers"
[rowHeight]="35"
[headerHeight]="35"
[footerHeight]="35"
[columns]="columns"
[scrollbarV]="true"
[rowClass]="getRowClass"
[columnMode]="'force'">
</ngx-datatable>
<ng-template #indexTemplate let-value="value">
<strong>{{value}}</strong>
</ng-template>
<ng-template #actionsTemplate let-row="row" let-value="value" let-i="index">
<a class="btn btn-link btn-xs" href="javascript:;" (click)="editCustomer(row)"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
</ng-template>
<div class="modal fade" bsModal #editorModal="bs-modal" (onHidden)="onEditorModalHidden()" [config]="{backdrop: 'static'}" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left"><i class="fa fa-shield"></i> Customer Details </h4>
<button type="button" class="close pull-right" title="Close" (click)="editorModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<customer-editor #customerEditor></customer-editor>
</div>
</div>
</div>
</div>
</div>
在我的 ts 文件中
editCustomer(row: Customer) {
this.customerEditor.editCustomer(row);
this.editorModal.show();
}
customerEditor 是
@ViewChild('customerEditor')
customerEditor: CustomerEditorComponent;
并在 customerEditor 中
editCustomer(customer: Customer) {
if (customer) {
this.customerEdit = new Customer();
Object.assign(this.customerEdit, customer);
}
并且在 customerEdit 视图中只有 {{customerEdit.name}}
而且,这很奇怪,但是如果转到 table 中的第二页,则弹出窗口会在 4 -5 秒后刷新数据。
比如在 table 中更改页面会在 angular 中暂停绑定几秒钟。
ok 我找到问题了,这是 lib 问题,最新版本已修复该问题 https://github.com/swimlane/ngx-datatable/issues/1321