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

Posted 2023-03-28

【中文标题】Angular Ag-Grid：单击按钮时撤消选定的行更改

【英文标题】：Angular Ag-Grid: Undo selected row changes on button click

【发布时间】：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 个按钮。

【参考方案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: '[phone]'
  ,
  
    id: 1,
    name: 'Another name',
    tel: '[phone]'
  
];

【讨论】：

您的想法似乎正确，但有一个问题，如何识别特定记录/行的数据

你说的Array<YourInterface>是什么意思？

@Olivia 我假设，您会得到一个包含任何内容的数组，以在网格中将任何条目显示为该数组的一行。每个条目都是一个对象，并且有一个对象模型，您可以从后端或 JSON 获得。如果您没有此型号，请使用any。 Array<any> 或 any[].

是的，我得到的对象数组与您提到的完全一样。让我试试看。

【参考方案2】：

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

【讨论】：

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