Angular Ag-Grid：单击按钮时撤消所选行的更改 [英] Angular Ag-Grid: Undo selected row changes on button click

问题描述

基于Angular和Javascript构建的应用程序。

Application built on Angular and Javascript.

具有第1列作为Checkbox的AG-Grid可编辑记录。
对5条记录进行任何更改后，选择任何特定记录的复选框之后，单击按钮说
< button name =撤消更改（单击）= undoFn（）/>

AG-Grid editable records having 1st column as Checkbox. After making any changes say on 5 records, after selecting checkbox for any particular record, on click of button Say <button name="Undo Changes" (click) = "undoFn()/>"

需要撤消所做的更改，并仅重新加载该特定记录（行）的先前数据，不是整个网格。

Need to undo the changes made, and reload the previous data for that particular records(row) only, not the entire grid.

按钮并不像所有单独的列一样内嵌在所有记录中。也只有1个按钮位于网格外部

Button is not inline with all records like a seperate column. There is only 1 button that too outside the Grid

再次简短地说-只需要刷新复选框已选中的特定行选中，单击位于网格外部的撤消按钮

在任何地方都找不到解决方案。

Not finding solution to this anywhere.

推荐答案

我想我知道您有问题。如果您使用@Input或将由其余调用设置的属性进行操作：

I think I know you kind of problem. If you operate with a @Input or a property that will be set by a rest-call:

@Input() data: Array<YourInterface>;

或

public data: Array<YourInterface>;

...

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

然后在您的模板中使用此数据属性直接是没有用的，因为在通过应用的ui部分进行修改之前，您无法确定此数据属性的状态。

then using this data-property in you template directly is not useful, because, you are not able to determine the state of this data-property, before you modified it via the ui part of your app.

直接使用它，执行以下操作：

Instead of using it directly, do something like this:

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 。

And use inputData in your template, instead of using data.

然后添加一个重置方法，您可以使用该方法将数据重置为使用ui进行操作之前的状态（将此方法连接到reset按钮将重置所有行）。

Then add a reset-method, that you can use to reset the data to the state before the manipulation with the ui (connecting this method to the reset button will reset all your rows).

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

之后，使用一种方法来保留数据。

After that use a method to persist your data.

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

  ...

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

编辑：我认为，您得到了一个数组，这个数组的每个条目都是一个对象，并且有一个模型，以将其显示为表格。

I assume, that you get an array of anything, every entry of this array is an object and has a model, to display it as table.

接口：

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

样本数据：

let data: Array<YourInterface> = [
  {
    id: 0,
    name: 'A name',
    tel: '[phone]'
  },
  {
    id: 1,
    name: 'Another name',
    tel: '[phone]'
  }
];

这篇关于Angular Ag-Grid：单击按钮时撤消所选行的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！