时间戳

首页 > 解决方案 > 当我的行数据从一个组件传递到另一个组件时更新时，如何检测 ag-grid 的变化

angular - 当我的行数据从一个组件传递到另一个组件时更新时，如何检测 ag-grid 的变化

问题描述

我正在开发一个在 angular6 上的项目，我们正在实施 ag-grid 来填充来自 angular 对话框的数据。由于多个团队正在工作，因此他们正在创建自己的组件。我陷入了一种不寻常的情况，我无法弄清楚如何解决这种情况。我们有一个名为 (ADD OWNER) 的按钮，它是一个名为 ADD-OWNER.component.ts 的组件，我在其中打开一个对话框并传递另一个名为 ownerdetails.component.ts 的组件，其中包含我的所有表单详细信息。对话框上有 2 个按钮（添加/取消），因此我将数据推送到元数据服务中，因为我不必保存在数据库中，我必须通过浏览器保留数据。我在 dialog.close 事件中进行的那部分编码工作正常。现在我必须将此 ownerdetails 传递到另一个名为 Gridcomponent 的组件中，我的 ag-grid 就在其中，因此我使用输入属性事件将数据从我的 add-owner.component 发送到网格组件。我通过传递给定的输入细节将网格组件选择器渲染到我的 add-onwer.component.ts 中。现在我在我的网格中使用输入属性来接收值，但是我希望在行数据发生变化时自动更新网格。该值未更新，我该如何实现。我可以看到值被推入所有者列表，但不知何故我必须在网格中显示。我没有确切的代码，但我尽力解释。ts 通过传递给定的输入详细信息。现在我在我的网格中使用输入属性来接收值，但是我希望在行数据发生变化时自动更新网格。该值未更新，我该如何实现。我可以看到值被推入所有者列表，但不知何故我必须在网格中显示。我没有确切的代码，但我尽力解释。ts 通过传递给定的输入详细信息。现在我在我的网格中使用输入属性来接收值，但是我希望在行数据发生变化时自动更新网格。该值未更新，我该如何实现。我可以看到值被推入所有者列表，但不知何故我必须在网格中显示。我没有确切的代码，但我尽力解释。

ADD-OWNER.Component.html

<button mat-button (click)="openDialog()">Open dialog</button>
      <app-grid-selector [gridOptions]="ownerlist ">

ADD-OWNER.Component.ts

  openDialog() {
    const dialogRef = this.dialog.open(OwnerDetails);

    dialogRef.afterClosed().subscribe(result => {
      ownerlist = Pushing data into a metadata service which is working fine
    });}

grid.component.html

    <ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="owner" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

grid.component.ts

 @Input() gridoptions
   ngOnint(){
   owner =this.gridOptions.rowData
   }

标签： angularag-gridag-grid-angular

解决方案

从ag-grid版本 `^22.1.1 开始，您可以使用

在组件中：

onRowDataUpdated作为

gridOptions = {
    onRowDataUpdated: function(){//do something}
}

在gridOptions模板中用作

 <ag-grid-angular
     ...
     [gridOptions]="gridOptions"
     ...
  >
  </ag-grid-angular>

推荐阅读