[Ag-Grid从子级更新父级网格

问题描述 投票:0回答:1

我在父组件中有一个ag-grid,在子组件中有一个模态,用于更新网格中的数据,但是直到刷新页面后,更改才会显示出来。我试图用ngOnChanges捕获更改,但是它不起作用

parent.Html:

<ag-grid-angular #subsequentSubmissionGrid style="width: 100%;" class="ag-theme-balham" filter="true"
    [rowData]="submissionServices.reviews" 
    [columnDefs]="submissionCols" 
    rowSelection='single'
    domLayout='autoHeight' 
    (gridSizeChanged)="onGridResized($event)" 
    [frameworkComponents]="frameworkComponents"
    [overlayNoRowsTemplate]='overlayNoRowsTemplate' 
    (gridReady)="onGridReady($event)"> 
  </ag-grid-angular>

parent.ts:

constructor(public submissionServices: SubmissionService) {
    ////The columnDefs gets assembled
}
onGridReady(params) {
    this.gridApi = params.api;
    console.log(this.gridApi)
    this.gridApi.sizeColumnsToFit();
    this.gridColumnApi = params.columnApi;
}
////////////ngOnChanges is not entering
ngOnChanges(changes: SimpleChanges){
    console.log(changes)
    console.log(this.submissionServices.reviews)
    console.log(this.gridApi)
}

onGridResized(params) {
    // resize ag-grid columns to fill grid
    if (params.clientWidth > 0) {
        params.api.sizeColumnsToFit();
    }
}

child.ts

constructor(private dataService: DataServicesService, private route: ActivatedRoute, private 
submissionService: SubmissionService) { }

addReviewer(){
  const reviewerToAdd = {
  submissionId: Number.parseInt(this.route.snapshot.paramMap.get('id')),
  reviewerId: this.currentReviewer.userId,
  reviewTypeId: this.currentReviewerType.id,
  reviewStatusId: 1,
  reviewDecisionId: null,
  reviewResponseReqd: false,
  reviewResponse: null,
  signedOffById: null,
  signoffDate: null,
  active: true
}
console.log(reviewerToAdd)
//////////////after the call I update the data
this.dataService.InsertReview(reviewerToAdd).subscribe(rps => {
  this.confirm = false;
  this.submissionService.reviews = [...this.submissionService.reviews, rps]
},
error => {
  console.log(error)
})
}
angular ag-grid
1个回答
1
投票

[ngOnChanges()仅在组件的@Input()属性更改时才输入,我认为不是这种情况。

解决方法是使用EventEmitter

child.ts

import { EventEmitter, Output } from '@angular/core';

@Output() newReviewerAdded: EventEmitter<void> = new EventEmitter();

addReviewer(){
  const reviewerToAdd = {
  submissionId: Number.parseInt(this.route.snapshot.paramMap.get('id')),
  reviewerId: this.currentReviewer.userId,
  reviewTypeId: this.currentReviewerType.id,
  reviewStatusId: 1,
  reviewDecisionId: null,
  reviewResponseReqd: false,
  reviewResponse: null,
  signedOffById: null,
  signoffDate: null,
  active: true
 }
 console.log(reviewerToAdd)
 //////////////after the call I update the data
 this.dataService.InsertReview(reviewerToAdd).subscribe(rps => {
  this.confirm = false;
  this.submissionService.reviews = [...this.submissionService.reviews, rps];
  this.newReviewerAdded.emit();
 },
 error => {
   console.log(error) 
 })
}

parent.html

<child (newReviewerAdded)="newReviewerAdded()"></child> // !! I was missing er here !!
<ag-grid-angular ....></ag-grid-angular>

parent.ts

newReviewerAdded() {
  console.log(this.submissionService.reviews); // this function will be called every time the EventEmitter newReviewerAdded emits.
}
© www.soinside.com 2019 - 2024. All rights reserved.