Ag-Grid 从父级更新行数据

Question

我有两个组件，一个用于选择（用户类型、用户），一个用于添加所选用户。

还有一个带有 ag-grid 的，我应该在其中显示来自上述组件的用户。

我之所以将它们放入不同的组件中，是因为我的老板想在应用程序的另一部分中重用第一个，我也打算将它与类似的组件一起使用，并要求我这样做就这样。

我已经在组件的开头传递了值，但我不知道如何检测数据何时更改以刷新网格。

parentComponent.HTML:

<div class="modal-body">
    <label>Reviewers are optional, select a review type and reviewer below to add to the submission 
        as reviewers</label>
    <div class="clr-row">
        <div class="clr-col-12 clr-col-md-6 clr-col-lg-4 clr-col-xl-4">
            <clr-select-container>
                <label>Review Type</label>
                <select clrSelect name="reviewerTypes" (change)="onChange(currentReviewerType)" 
                    [(ngModel)]="currentReviewerType">
                    <option [value]="" selected disabled hidden>
                        Choose value
                    </option>
                    <option *ngFor="let reviewType of reviewerTypes" [ngValue]="reviewType">
                        {{reviewType.reviewType}}
                    </option>
                </select>
            </clr-select-container>
        </div>
        <div class="clr-col-12 clr-col-md-6 clr-col-lg-4 clr-col-xl-4">
            <clr-select-container>
                <label>Reviewer</label>
                <select clrSelect name="options" [(ngModel)]="currentReviewer">
                    <option value="" selected disabled hidden>Choose value</option>
                    <option *ngFor="let reviewer of reviewers" [ngValue]="reviewer">
                        {{reviewer.user}}
                    </option>
                </select>
            </clr-select-container>
        </div>
    </div>
    <div class="clr-row" style="margin-top: 20px;">
        <div class="clr-col-12 clr-col-md-6 clr-col-lg-4 clr-col-xl-3">
            <clr-button-group class="btn-primary">
                <clr-button (click)="addReviewer()" >Add Reviewer</clr-button>
            </clr-button-group>
        </div>
    </div>
</div>
<div class="modal-footer">
    <app-q-sub-reviewer-grid style="width: 100%;" [reviewersAdded]='reviewersAdded'></app-q-sub- 
    reviewer-grid>
</div>

parentComponent.ts:

ngOnInit() {
   this.dataService.GetReviewerTypes().subscribe( response => this.reviewerTypes = response, error => 
   console.log(error));
   this.mockType = {id:1, reviewType:"type"}
   this.mockReviewer = {userId:1,user:"Samel"}
   //////////// this is a mock to see if it was working, i'll remove this lates
   let reviewerToAdd = {reviewerType:this.mockType, reviewer:this.mockReviewer}
   this.reviewersAdded.push(reviewerToAdd)
   this.reviewersAdded.push(reviewerToAdd)
   this.reviewersAdded.push(reviewerToAdd)
}

onChange(selection){
   let reviewerId = selection;
   this.dataService.GetReviewersByType(reviewerId.id).subscribe( (response)=> {
     this.reviewers = response
     this.currentReviewer = response[0]
   }, 
   error => console.log(error));
}

addReviewer(){
   console.log(this.currentReviewer)
   let reviewerToAdd = {reviewerType:this.currentReviewerType, reviewer:this.currentReviewer}
   this.reviewersAdded.push(reviewerToAdd)
   console.log(this.reviewersAdded)
}

childGridComponent.HTML:

<ag-grid-angular style="width: 100%; height: 118px;" class="ag-theme-balham" 
   [rowData]="rowData"
   [columnDefs]="columnDefs"
   [animateRows]="true" 
   [enableSorting]="true" 
   [enableFilter]="true" 
   (gridReady)="onGridReady($event)" 
   (gridSizeChanged)="onGridSizeChanged($event)">
</ag-grid-angular>

childGridComponent.ts

@Input('reviewersAdded') reviewersAdded: any[];

constructor() {
   this.columnDefs = [
     { headerName: "Review Type", sortable: true, filter: true, field: 'reviewerType', 
      suppressSizeToFit: false },
     { headerName: "Reviewer", sortable: true, filter: true, field: 'reviewer', suppressSizeToFit: 
      false }
   ]
   this.defaultColDef = { filter: true };
}

ngOnInit() {
}

onGridReady(params) {
   this.gridApi = params.api;
   this.gridApi.sizeColumnsToFit();
   this.gridColumnApi = params.columnApi;
   this.reviewersAdded.forEach(item => {
   this.rowData.push({ reviewerType: item.reviewerType.reviewType, reviewer: item.reviewer.user })
      var res = this.gridApi.updateRowData({ add: [{ reviewerType: item.reviewerType.reviewType, 
      reviewer: item.reviewer.user }] });
      console.log(res);
   })
}

//////this ngOnChanges is not working
ngOnChanges(changes: SimpleChanges) {
   console.log(this.reviewersAdded)
}

onGridSizeChanged(params: GridSizeChangedEvent) {
   params.api.sizeColumnsToFit();

}

Answer 1

我认为 ngOnChanges 不会被解雇，因为它是一个数组，而数组和对象是引用类型。 ngOnChanges 只有在数组或对象在内存中的位置发生变化时才会生效。所以你必须不可变地修改数组。

ngOnInit() {
   this.dataService.GetReviewerTypes().subscribe( response => this.reviewerTypes = response, error => 
   console.log(error));
   this.mockType = {id:1, reviewType:"type"}
   this.mockReviewer = {userId:1,user:"Samel"}
   //////////// this is a mock to see if it was working, i'll remove this lates
   let reviewerToAdd = {reviewerType:this.mockType, reviewer:this.mockReviewer}
   this.reviewersAdded.push(reviewerToAdd)
   this.reviewersAdded.push(reviewerToAdd)
   this.reviewersAdded.push(reviewerToAdd)
   // have to spread the reviewerToAdd object as well since it's a reference type
   this.reviewersAdded = [...this.reviewersAdded, {...reviewerToAdd }];
}
....
addReviewer(){
   console.log(this.currentReviewer)
   let reviewerToAdd = {reviewerType:this.currentReviewerType, 
   reviewer:this.currentReviewer}
   this.reviewersAdded = [...this.reviewersAdded, { ...reviewerToAdd }];
   console.log(this.reviewersAdded)
}

有了这些变化，看看 ngOnChanges 是否激活。

如果 ngOnChanges 激活，您将需要更新行数据，甚至可能需要使用 gridApi 或发出另一个 http 请求并查看数据是否更改。

Answer 2

您可以在代码中使用现有的输入事件发射器：

在你的子（网格）组件中定义您的数据源或评论者属性.

dataSource: any; // your reviewers that feeds the table.
get reviewersAdded() {
   return this.dataSource;
}

@Input() set reviewersAdded(val: any) {
    if (this.dataSource !== val) {
       this.dataSource = val; // update the datasource
   }
}

Ag-Grid 从父级更新行数据

Ag-Grid update rowdata from parent

parent-child

ag-grid

angular