2

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

示例代码在这里

有一个叫“奥斯汀长大”的按钮，点击后奥斯汀的年龄会通过this.rows = [...this.rows]in功能改变和更新表格updateTable()。

但是当我在展开详细信息行后单击按钮时，表格将刷新并折叠所有行详细信息。

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

所以...有没有办法在不折叠rowDetail（或不刷新整个表）的情况下动态更新一行的值。

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

4

2 回答 2

0

为时已晚，但希望这可以帮助别人......

我更改了您的代码并在网格上添加了一个按钮，显示“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 行。

于 2019-08-06T06:59:04.613 回答
0

我在这里分叉了你的代码。在更新行时保留扩展行的修改代码是

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(){

  }


}
于 2018-03-07T03:59:07.420 回答