我在父组件中有一个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)
})
}
[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.
}