Angular Ag-Grid: отмена изменений выбранной строки при нажатии кнопки - PullRequest
Новая
       4

Angular Ag-Grid: отмена изменений выбранной строки при нажатии кнопки

0 голосов
/ 21 мая 2019

Приложение построено на Angular и Javascript.

AG-Grid редактируемые записи, имеющие 1-й столбец в качестве флажка. После внесения каких-либо изменений, скажем, для 5 записей, после установки флажка для любой конкретной записи, нажмите кнопку Скажите <button name="Undo Changes" (click) = "undoFn()/>"

Необходимо отменить внесенные изменения и перезагрузить предыдущие данные только для этой конкретной записи (строки), а не для всей сетки.

Кнопка не встроена во все записи, как отдельный столбец. Есть только 1 кнопка, которая тоже вне сетки

Еще раз коротко - Требуется обновить только определенную строку, чей флажок был установлен, по нажатию кнопки Отменить, присутствующей вне таблицы

Нигде не нашел решения.

Ответы [ 2 ]

1 голос
/ 21 мая 2019

Кажется, я знаю, что у тебя проблемы.Если вы работаете с @Input или свойством, которое будет установлено вызовом rest: 

@Input() data: Array<YourInterface>;

или 

public data: Array<YourInterface>;

...

public onInit() {
  httpClient.get(configuration).subscribe(data => {
    this.data = data;
  }
}

, то использование этого свойства данных в вашем шаблоне напрямуюбесполезно, потому что вы не можете определить состояние этого свойства данных, прежде чем изменить его через пользовательскую часть вашего приложения.

Вместо того, чтобы использовать его напрямую, сделайте что-то вроде этого: 

public inputData: Array<YourInterface>;
@Input() data: Array<YourInterface>;

...

public onInit() {
  this.inputData = {...this.data};
}

или 

public inputData: Array<YourInterface>;
public data: Array<YourInterface>;

...

public onInit(): void {
  httpClient.get(configuration).subscribe(data => {
    this.data = data;
    this.inputData = {...this.data};
  }
}

И используйте inputData в своем шаблоне вместо data.

Затем добавьте метод сброса, который вы можете использоватьсбросить данные в состояние до манипуляции с пользовательским интерфейсом (подключение этого метода к кнопке сброса приведет к сбросу всех ваших строк). 

resetData(): void {
  this.inputData = {...this.data};
}

После этого используйте метод для сохранения ваших данных. 

saveData(): void {
  this.data = {...this.inputData};

  ...

  // more steps to persistence
  // make a http.post or emit this.data
}

РЕДАКТИРОВАТЬ: я предполагаю, что вы получаете массив чего угодно, каждая запись этого массива является объектом и имеет модель, чтобы отобразить его в виде таблицы.

Интерфейс: 

interface YourInterface {
  id: number;
  name: string;
  tel: string;
}

Пример данных: 

let data: Array<YourInterface> = [
  {
    id: 0,
    name: 'A name',
    tel: '+892383498239'
  },
  {
    id: 1,
    name: 'Another name',
    tel: '+23298238923'
  }
];
0 голосов
/ 21 мая 2019

Существует несколько событий, которые ag-Grid предоставляет при редактировании ячейки, которые вы можете использовать, например: с помощью метода which () для события вы узнаете, какая ячейка является целевой, и вы можете создатькарта старого значения и нового значения с ним.Если кнопка нажата, вы можете проверить строки и соответственно сбросить значения ячейки.

...