Как автоматически обновлять ячейки в ag-grid в проекте Angular

Вот мой проект:
 введите описание изображения здесь

Я выбираю вариант из раскрывающегося меню. Я нажимаю кнопку «Обновить сетку», и сетка обновляется. Таким образом, второй столбец обновляется числовым значением, выбранным из первого столбца.

Есть небольшая проблема: когда сетка обновляется, в раскрывающемся меню восстанавливается значение по умолчанию. Этого можно избежать, обновив только второй столбец.

Я хочу, чтобы второй столбец обновлялся автоматически без использования кнопки.

Тот факт, что первый столбец имеет настраиваемый компонент рендеринга ячеек, затруднил мне поиск решения.
Поскольку метод обновления сетки может быть записан только в компоненте сетки. Вот почему:

grid.component.html

    <button (click)="RefreshRisqueBrutColumn()">Refresh grid</button>
    
    <ag-grid-angular
      style="width: 500px; height: 500px;"
      class="ag-theme-balham"
      [enableSorting]="true"
      [enableFilter]="true"
      [pagination]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
      [enableCellChangeFlash]="true"
    >
    </ag-grid-angular>

grid.component.ts код:

     /**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */
       private gridApi;
       private gridColumnApi;
       onGridReady(params) {
         this.gridApi = params.api;
         this.gridColumnApi = params.columnApi;
         params.api.sizeColumnsToFit();
       }
       public RefreshRisqueBrutColumn() {
         const params = { force: true };
         this.gridApi.refreshCells(params);
       }
       /**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */

Обратите внимание на метод onGridReady? Это ключ к процессу обновления. И его можно привязать к gridReady, только если он определен в grid.component.ts. То есть: я не могу запустить обновление из компонента customCellRenderer.

customCellRenderer.component.html:

    <select class="form-control"  (change)=" UpdateRisqueBrut($event.target);" >
        <br>
        <option id="1">1- Très improbable</option>
        <option id="2">2- Peu probable</option>
        <option id="3">3- Possible</option>
        <option id="4">4- Probable</option>
    </select>
    <br>

соответствующий код из customCellRenderer.component.ts:

    message:Number;
      constructor(private data: DataService) { }
      ngOnInit() {
      }
      params: any;
      agInit(params: any): void {
        this.params = params;
      }
      proba=5;
      public UpdateRisqueBrut(t) {
        if (t.value === "1- Très improbable") {
        this.data.changeMessage(1)
          this.proba=1;
        } else if (t.value === "2- Peu probable") {
        this.data.changeMessage(2)
          this.proba=2;
        } else if (t.value === '3- Possible') {
        this.data.changeMessage(3)
        } else if (t.value === '4- Probable') {
        this.data.changeMessage(4)
        }
      }

Подводя итоги, как я могу автоматически обновлять второй столбец на основе значения, выбранного в первом столбце (то есть из компонента настраиваемого средства визуализации ячеек), когда код обновления (и методы) обязательно должны находиться в grid.component.ts.

Например: могу ли я запустить метод, который обновлял бы сетку из настраиваемого средства визуализации ячеек?
Спасибо за ваше время!


person Ahmed Ghrib    schedule 06.05.2019    source источник
comment
Следует ли мне вставить grid.component.ts в customCellRenderer.component.ts. Таким образом, я смогу запустить метод обновления с customCellRenderer.component.ts?   -  person Ahmed Ghrib    schedule 06.05.2019
comment
Это, по-видимому, вызывает так называемую циклическую зависимость и приводит к сбою приложения, что имеет смысл: ПРЕДУПРЕЖДЕНИЕ в обнаружении циклической зависимости: src \ app \ drop-down-cell-renderer \ drop-down-cell-renderer.component.ts - ›src \ app \ app.component.ts - ›src \ app \ drop-down-cell-renderer \ drop-down-cell-renderer.component.ts   -  person Ahmed Ghrib    schedule 06.05.2019


Ответы (2)


Я нашел глупый способ обойти это, и вы можете использовать его, пока мы ждем твердого ответа.
Просто добавьте это в определение сетки:
(cellMouseOut) = "RefreshRisqueBrutColumn ()"

person Ahmed Ghrib    schedule 06.05.2019

Я не могу запустить обновление из компонента customCellRenderer.

Это не так. params из agInit метода редактора ячеек имеет ICellEditorParams и содержит свойство api, имеющее тип GridApi. Таким образом, у вас может быть функция внутри редактора ячеек, которая может вызывать params.api.refreshCells(). Я не знаю, решит ли это вашу проблему, но хотел указать на это неправильное утверждение. Большинство параметров обратного вызова в ag-grid содержат эти свойства, а не только GridReady.

person abd995    schedule 06.05.2019