Обновить столбец строки без свертывания rowDetail в ngx-datatable

Я использую ngx-datatable для создания таблицы с rowDetail в моем приложении Angular5.

Пример кода здесь

Есть кнопка вызова «Austin growup», после нажатия, возраст Остина изменится и таблица обновится через this.rows = [...this.rows] в функции updateTable().

Но когда я нажимаю кнопку после развертывания строки сведений, таблица обновляется и свертывает все rowDetail.

Думаю, проблема в this.rows = [...this.rows]. Я верю, что это освежит всю таблицу.

Итак ... есть ли способ динамически обновить значение одной строки без свертывания rowDetail (или без обновления всей таблицы).

Любое предложение поможет, спасибо.


angular angular5 ngx-datatable
person Ryan    schedule 27.02.2018    source источник
comment
нет никаких предложений?   -  person Ryan    schedule 02.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Я добавил ваш код здесь. Модифицированный код для сохранения развернутых строк при обновлении строк:

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

  }


}
person Raghu Ram    schedule 07.03.2018
comment
Спасибо за помощь. Я знаю, что вы можете открыть его снова, но в моем реальном случае, когда детали строки открываются, он вызывает API для получения некоторых данных, поэтому повторное открытие вызовет повторный вызов API, чего я не хочу, чтобы это произошло. Вот почему я не хочу обновлять всю таблицу. Тем не менее спасибо за ответ :) - person Ryan; 09.03.2018

arrow_upward
0
arrow_downward

Слишком поздно, но надеюсь, что это поможет кому-то другому ...

Я изменил ваш код и добавил одну кнопку в сетку с надписью "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 каждый раз.

person Rahul Dadhich    schedule 06.08.2019