Угловая ячейка Ag-gridRendererFramework - изменение в компоненте не отражено в gridData - PullRequest
Новая
       114

Угловая ячейка Ag-gridRendererFramework - изменение в компоненте не отражено в gridData

0 голосов
/ 30 июня 2018

У меня есть редактируемая сетка в app.component, где один из столбцов является CellRendererFramework: 

createColumnDefs() {
    return [
      { headerName: 'First Name', field: 'firstName', editable: true },
      { headerName: 'Last Name', field: 'lastName', editable: true },
      { headerName: 'Email', field: 'email', editable: true },
      { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent },
    ];
  }

Компонент определяется следующим образом: 

import { Component, OnInit } from '@angular/core';
import { User, DataService } from './data.service';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-combo-box',
  templateUrl: './combo-box.component.html',
  styleUrls: ['./combo-box.component.css']
})
export class ComboBoxComponent implements OnInit, ICellRendererAngularComp {

  users: User[] = [];
  admins: any;

  constructor(private dataservice: DataService) {}

  ngOnInit() {
    this.users = this.dataservice.getAdminUsers();
  }

  refresh(params: any): boolean {
    return false;
  }

  public params: any;

  agInit(params: any): void {
      this.params = params;
      this.admins = this.params.value;
  }


  public getFollows(){
    return this.admins;
  }

  onChange(evt){
    this.admins = evt.value;
  }

}

Шаблон combo-box.component.html - это материал, выбранный с включенной опцией множественного выбора. 

<mat-form-field>   <mat-select multiple [(value)]="admins" (selectionChange)="onChange($event)">
    <mat-option *ngFor="let user of users | async" [value]="user.firstName">{{user.firstName}}</mat-option>   </mat-select> </mat-form-field>

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

Таким образом, любое изменение в ComboBoxComponent не приводит к изменению rowData. Поэтому я не могу сохранить данные сетки после модификации.

Чего мне не хватает?

Я использую Ag-grid версию: 17.1.0 Угловой: 6.0.3

1 Ответ

0 голосов
/ 30 июня 2018

Причина в том, что ваш ComboBoxComponent реализует ICellRendererAngularComp и, как вы дали colDef { headerName: 'Admins', field: 'admins', cellRendererFramework: ComboBoxComponent }, это средство визуализации ячеек , а не редактор ячеек . Его цель - просто отобразить данные.

Если вы хотите внести изменения в rowData, вам придется создать собственный редактор и предоставить его как cellEditorFramework.

Взгляните на этот пример plunk: угловой пользовательский редактор ag-grid

Как видите, в поле mood есть пользовательский рендерер, а также пользовательский редактор для внесения изменений. 

{
    headerName: "Mood",
    field: "mood",
    cellRendererFramework: MoodRendererComponent,
    cellEditorFramework: MoodEditorComponent,
    editable: true,
    width: 300
}

Также обратите внимание, что MoodEditorComponent реализует ICellEditorAngularComp.

Для получения дополнительной информации Компоненты редактора ag-grid

...