Как автоматически обновить ячейки в ag-grid в проекте Angular - PullRequest
0 голосов
/ 06 мая 2019

Вот мой проект:
enter image description here

Я выбираю вариант из выпадающего меню.Я нажимаю на кнопку «Обновить сетку», и она обновляет сетку.Таким образом, второй столбец обновляется в соответствии с числовым значением, выбранным из первого столбца.
(Существует небольшая проблема: при обновлении сетки восстанавливается значение по умолчанию для меню dropDown. Я позабочусь об этом, выбрав только обновлениевторой столбец)
В любом случае, я хочу:
Второй столбец обновляется автоматически без использования кнопки.
Тот факт, что в первом столбце есть пользовательский компонент средства визуализации ячеек, усложнил мне задачу.чтобы найти решение.
Поскольку метод обновления сетки может быть записан только в компоненте сетки.Вот почему:

Это: 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.
Т.е. можно ли запустить метод, который бы обновлял сетку из пользовательского средства визуализации ячеек?
Спасибо за ваше время!

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

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

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

0 голосов
/ 06 мая 2019

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

...