Ag-Grid обновляет данные строки из родительского - PullRequest
Новая
       8

Ag-Grid обновляет данные строки из родительского

0 голосов
/ 06 марта 2020

У меня есть два компонента: один, где у меня есть несколько вариантов выбора (userType, user) и кнопка для добавления выбранного пользователя.

И еще один с ag-grid, где я должен отображать пользователей из Приведенный выше компонент.

Причина, по которой у меня есть их в разных компонентах, заключается в том, что мой начальник хочет повторно использовать первый в другой части приложения, в сетке. Я также собираюсь использовать его с аналогичным компонентом и попросил меня сделать это следующим образом.

Я уже передаю значение в начале компонента, но я не знаю, как определить, когда данные изменились, чтобы обновить sh сетку.

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. тс 

@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();

}

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Я думаю, что 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-запрос и посмотрев, изменились ли данные.

0 голосов
/ 06 марта 2020

Вы можете использовать существующий Input Eventemitter в своем коде:

В своем дочернем (сеточном) компоненте задайте свойство dataSource или reviewrs. 

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