Question

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

具有第一列作为复选框的AG网格可编辑记录。在对5条记录进行更改后，在选中任何特定记录的复选框之后，单击“说” <button name="Undo Changes" (click) = "undoFn()/>"

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

按钮并非像单独的列一样与所有记录都内联。只有1个按钮也位于网格外部

再次简短地说-需要仅刷新其复选框已选中的特定行，请单击网格外部的“撤消”按钮

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

Answer 1

我想我知道你有点问题。如果您使用@Input或将通过rest-call设置的属性进行操作：

@Input() data: Array<YourInterface>;

或

public data: Array<YourInterface>;

...

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

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

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

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。

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

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'
  }
];

Answer 2

ag-Grid在单元格编辑中提供了多个事件供您使用，例如：通过在事件上使用 which（）方法，您可以知道目标是哪个单元格，并且您可以使用它创建旧值和新值的映射。如果单击该按钮，则可以检查行并相应地重置单元格的值。

Angular Ag-Grid：单击按钮时撤消所选行的更改

2 个答案: