我正在研究一个Angular 2项目 . 我使用ngx-datatable显示用户列表:
<ngx-datatable class="material"
[rows]="rows"
[columnMode]="'force'"
[headerHeight]="40"
[footerHeight]="40"
[rowHeight]="30"
[externalPaging]="true"
[limit]="limit"
(select)='onSelect($event)'
(activate)='onActivate($event)'
[selected]="selected"
[selectionType]="'checkbox'">
<ngx-datatable-column
[width]="30"
[sortable]="false"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column name="Name">
<ng-template let-value="value" ngx-datatable-cell-template>
<div class="redNumber">{{value}}</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Title"></ngx-datatable-column>
<ngx-datatable-column name="company"></ngx-datatable-column>
<ngx-datatable-column name="Status" [cellClass]="getStatusClass">
</ngx-datatable-column>
<ngx-datatable-column name="Last connexion"></ngx-datatable-column>
当我点击触发以下showAll()方法的按钮时,没有任何反应,除非我再次单击,刷新列表,或者如果我单击一次,并调整浏览器窗口的大小,列表就会刷新 . 怎么能我正确刷新列表?我究竟做错了什么?在我的组件类中,我有这个:
export class M1OamRoomsListComponent{
selected = [];
public rows = [
.... // list of users
];
public limit: number;
constructor(public translation: TranslationService){
this.limit = 10;
}
getStatusClass({ row, column, value }): any {
return {
'disabled': value === 'Disabled',
'enabled': value === 'Enabled'
};
}
onSelect({ selected }) {
console.log('Select Event', selected, this.selected);
this.selected.splice(0, this.selected.length);
this.selected.push(...selected);
}
onActivate(event) {
//console.log('Activate Event', event);
}
showAll(): void {
this.limit = this.rows.length;
}
}
3 回答
我想刷新你必须做的表:
根据
ngx-datatable
的泳道页面,ngx-datatable
遵循OnPush变化检测策略,因此它只检查不可变数据类型 . 因此,如果您希望ngx-datatable
检测更改 . 做完之后:做:
在此处阅读有关变更检测的更多信息:Link