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

时间:2018-12-03 17:33:04

标签: angular ag-grid ag-grid-angular

我正在开发一个在angular6上的项目,我们正在实现ag-grid来填充angular对话框中的数据。由于多个团队都在工作,所以他们正在创建自己的组件。我被困在一种不寻常的情况下,我无法弄清楚如何解决这种情况。我们有一个名为(ADD OWNER)的按钮,它是一个名为ADD-OWNER.component.ts的组件,在这里我打开一个对话框并传递另一个名为ownerdetails.component.ts的组件,该组件具有我所有的表单详细信息。对话框上方有2个按钮(ADD / CANCEL),以便将数据推送到元数据服务中,因为我不必保存在数据库中,而必须将数据保留在浏览器中。我在dialog.closed事件中所做的那部分编码工作正常。现在,我必须将此所有者详细信息传递给另一个名为Gridcomponent的组件,其中我的ag-grid处于该位置,因此我使用输入属性事件从我的添加拥有者发送数据。组件到网格组件。我通过传递输入细节(如给定)将网格组件选择器渲染到我的add-onwer.component.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
   }

1 个答案:

答案 0 :(得分:0)

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

在组件中:

onRowDataUpdated

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

在模板中将gridOptions用作

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