Angular 2 - 刷新 ngx-datatable 列表问题答案

【问题标题】：Angular 2 - Refresh ngx-datatable list issueAngular 2 - 刷新 ngx-datatable 列表问题
【发布时间】：2017-09-06 07:20:00
【问题描述】：

我正在开发一个 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;
}
}

【问题讨论】：

标签： angular angular2-template ngx-datatable

【解决方案1】：

我认为刷新表格你必须做的：

this.rows = [...this.rows]

【讨论】：

谢谢！像魅力一样工作！
爱你兄弟！你救了我。
看起来他们使用了角度changeDetection:onPush 策略来优化网格性能。分页区域中的 #of 项目正在增加，但行没有得到更新。
是的，我猜到了swimlane.gitbook.io/ngx-datatable/cd

【解决方案2】：

this.rows.push(result);
this.rows = [...this.rows]

【讨论】：

【解决方案3】：

根据ngx-datatable的泳道页面，ngx-datatable遵循OnPush变化检测策略，因此它只检查不可变数据类型。因此，如果您希望ngx-datatable 检测更改。做完之后：

  this.selected.push(...selected);

做：

this.selected = [...this.selected]

在此处阅读有关更改检测的更多信息：Link

【讨论】：

【解决方案4】：

我偶然发现了这篇文章，因为我在对任何列进行排序时遇到问题，UI 没有更新内部组件，直到我再次上下滚动。

我设法解决了之前建议的问题：

用户界面：

<ngx-datatable (......) (sort)="onSort()">

TS：

  onSort() {
    const data = this.filteredTableValues;
    this.filteredTableValues = [];
    this.changeDetectorRef.detectChanges();
    this.filteredTableValues = [...data];
  }

希望这可以帮助遇到同样情况的人

【讨论】：