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

【问题标题】：Angular Ag-Grid: Undo selected row changes on button clickAngular Ag-Grid：单击按钮时撤消选定的行更改
【发布时间】：2019-10-07 10:16:56
【问题描述】：

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

AG-Grid 可编辑记录，第一列为复选框。在对 5 条记录进行任何更改后，在选择任何特定记录的复选框后，单击按钮说 <button name="Undo Changes" (click) = "undoFn()/>"

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

按钮没有像单独的列那样与所有记录内联。只有 1 个按钮太在网格之外

再次简而言之-需要仅刷新复选框已选中的特定行，单击网格外的撤消按钮

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

【问题讨论】：

您可以将this 传递给undoFn(this) 函数并获取.ts 文件中的数据并更新数据并更新显示数据的list。
@BijayYadav - 该按钮未与所有记录内联，在网格之外也只有 1 个按钮。

标签： javascript angular ag-grid ag-grid-angular

【解决方案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'
  }
];

【讨论】：

您的想法似乎正确，但有一个问题，如何识别特定记录/行的数据
你说的Array<YourInterface>是什么意思？
@Olivia 我假设，您会得到一个包含任何内容的数组，以在网格中将任何条目显示为该数组的一行。每个条目都是一个对象，并且有一个对象模型，您可以从后端或 JSON 获得。如果您没有此型号，请使用any。 Array<any> 或 any[].
是的，我得到的对象数组与您提到的完全一样。让我试试看。

【解决方案2】：

ag-Grid 在单元格编辑中提供了多个事件供您使用，例如：通过在事件上使用 which() 方法会告诉您正在定位哪个单元格，您可以用它创建一个旧值和新值的映射。如果单击该按钮，您可以检查行并相应地重置单元格的值。

【讨论】：

听起来不错，您可以举个例子吗？