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

Question

我在父组件中有一个ag-grid，在我的子组件中有一个模态框，用于更新网格中的数据，但在刷新页面之前我的更改不会显示。我试图用ngOnChanges 捕捉更改，但它不起作用

父.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>

父.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)
})
}

Answer 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) 
 })
}

父.html

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

父.ts

newReviewerAdded() {
  console.log(this.submissionService.reviews); // this function will be called every time the EventEmitter newReviewerAdded emits.
}