web-dev-qa-db-ja.com

Angular 2-ngx-datatableリストの問題を更新

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（）メソッドをトリガーするボタンをクリックしても、2回クリックしてリストが更新されるか、1回クリックしてブラウザのウィンドウのサイズを変更しない限り、何も起こりません。リストを正しく更新しますか？私は何が間違っているのですか？私のコンポーネントクラスには、次のものがあります。

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;
}
}
angularangular2-templatengx-datatable
6
Marc El Bichon

私はあなたがしなければならないテーブルをリフレッシュすると思います：

this.rows = [...this.rows]
12
mtimoleon
this.rows.Push(result);
this.rows = [...this.rows]
2
jhonalexander Rodriguez

ngx-datatableのスイムレーンページによると、ngx-datatableはOnPush変更検出戦略に従うため、不変のデータ型のみをチェックします。したがって、ngx-datatableで変更を検出する場合。行った後：

  this.selected.Push(...selected);

行う：

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

変更検出の詳細については、こちらをご覧ください： リンク

1
Shubhangi Jagtap

列が並べ替えられているときに問題が発生したため、この投稿に遭遇しました。UIは、上下にスクロールするまで内部コンポーネントを更新していませんでした。

私は以前に提案されたものでなんとか回避策をとることができました：

UI：

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

TS：

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

これが同じ場合に誰かを助けることを願っています

0
Daniel C