Ag-Grid обновляет сетку в родительском элементе от дочернего

Question

У меня есть ag-grid в родительском компоненте и модальный в моем дочернем компоненте, который обновляет данные из сетки, но мои изменения не отображаются, пока я не обновлю sh страницу. Я пытался перехватить изменения с 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)
})
}

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

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