Question

我使用ngx-datatable在我的Angular5应用程序中创建一个包含rowDetail的表。

Example code here

按钮调用“Austin growup”，点击后，奥斯汀的年龄将更改并通过功能this.rows = [...this.rows]中的updateTable()更新表格。

但是当我在展开细节行后单击按钮时，该表将刷新并折叠所有rowDetail。

我认为问题是this.rows = [...this.rows]。我相信这会刷新整个表格。

所以...有没有办法动态更新一行的值而不会崩溃rowDetail（或没有整个表刷新）。

任何建议都会有所帮助，谢谢。

Answer 1

我已将您的代码here分叉。在更新行时保留扩展行的修改代码是

import { Component, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  @ViewChild('myTable') table: any;
  // to hold expanded row IDs
  expandedId=[];

  rows = [
    { id: 0, name: 'Austin', gender: 'Male', age: 20},
    { id: 1, name: 'Dany', gender: 'Male', age: 30},
    { id: 2, name: 'Molly', gender: 'Female', age: 40},
  ];

   constructor() {}



  toggleExpandRow(row) {
    console.log('Toggled Expand Row!', row);
    this.table.rowDetail.toggleExpandRow(row);
    // adding the expanded row to row id on expanding and removing row id on collapse.
    const index=this.expandedId.indexOf(row.id);
    if(index > -1)
      this.expandedId.splice(index,1);
    else{
      this.expandedId.push(row.id);
    }
  }

  onDetailToggle(event) {
    console.log('Detail Toggled', event);
  }

  updateTable(){
    this.rows[0].age = this.rows[0].age + 1;
    this.rows = [...this.rows];
  // expanding the rows upon updating the row values.
     setTimeout(()=> {
       this.expand();
     },100);
  }
// method to toggle the rows in expandedId
expand(){
    this.table.rowDetail.collapseAllRows();
    for(var i=0;i<this.rows.length;i++){
      if(this.expandedId.indexOf(this.rows[i].id) > -1){
        this.table.rowDetail.toggleExpandRow(this.rows[i])
      }
    }
}

  ngOnInit(){

  }


}

Answer 2

为时已晚，但希望这可以对其他人有所帮助...

我更改了您的代码，并在网格上添加了一个按钮，上面写着“ Growup”

您可以在此处查看演示：https://angular-f8e5ed.stackblitz.io

检查代码（从代码中叉出）：https://stackblitz.com/edit/angular-f8e5ed

在网格中添加了一列：

<ngx-datatable-column name="Action" >
          <ng-template let-row="row" ngx-datatable-cell-template>
            <a style="cursor: pointer; color: chocolate; font-style: italic;" (click)="onEditClick(row)">Growup</a>
          </ng-template>
</ngx-datatable-column>

通过在网格上单击成长按钮来调用的功能：

onEditClick(row) {
    ++row.age; 
  }

通过这种方式，您可以管理/更新特定行上的数据，而无需每次都重新加载/刷新整个ngx行。

在ngx-datatable中更新没有折叠rowDetail的行列

2 个答案: