Пользовательский контроль внутри ячейки ag-сетки

Question

Хо, я поставил пользовательский контроль внутри редактора ячейки сетки ag-grid?

Колонка Определение:

{ 
      headerName: 'Product', 
      field: 'product', 
      width: 140, 
      editable: true, 
      cellRendererFramework: ProductEditorComponent 
     }, 

и компонент редактора:

@Component({ 
selector: 'ag-product-editor-control', 
template: ` 
    <div #container>  
     <ng-select 
      [options]="products" 
      [multiple]="true" 
      placeholder="Select multiple"> 
     </ng-select> 
    </div> 
`, 
providers: [RegionProductsConfigService] 

}) 
    export class ProductEditorComponent implements AgEditorComponent, AfterViewInit { 
products: Array<any>; 
item: any; 

@ViewChild('container', { read: ViewContainerRef }) private container; 
ngAfterViewInit() { 
    this.container.element.nativeElement.focus(); 
} 

agInit(params : any): void { 
    this.products = RegionProductsConfigService.getProducts().map(x => ({ 'value': x.ID, 'label': x.Name })); 
} 
} 

Но он не кажется, связать элементы. Может кто-нибудь помочь?

Answer 1

Моим решением было поднять пользовательское событие в компоненте визуализации ячеек, который содержит ссылку на строку в сетке и выбранное значение. Затем я мог добавить добавление прослушивателя событий в родительский компонент, который обновил атрибут rowData сетки.

Клетка рендер должен выглядеть примерно так:

import {Component} from "@angular/core"; 
import {AgRendererComponent} from "ag-grid-ng2"; 

@Component({ 
    moduleId: module.id, 
    template: `<md-select [(ngModel)]="selectedValue" (change)="onChange($event)"> 
        <md-option 
         ngfor="let opt of params.context['options']" 
         value="{{ opt.value }}"> 
         {{ opt.name }} 
        </md-option> 
       </md-select>` 
}) 

export class CustomCellRendererComponent implements AgRendererComponent { 
    private params: any; 
    private selectedValue: string; 

    agInit(params: any): void { 
     this.params = params; 
     this.selectedValue = this.params['data']['selectedValue']; 
    } 

    onChange(event: any) { 
     let gridEvent: CustomEvent = new CustomEvent('option-changed', { 
      'bubbles': true, 
      'detail': { 
       'row': this.params.data.row, 
       'value': event.value 
      } 
     }); 
     event.source.trigger.nativeElement.dispatchEvent(gridEvent); 
    } 
} 

Назад в родительском компоненте, слушатель событий выглядит следующим образом:

document.addEventListener('option-changed', (e) => { 
    this.rowData[e['detail']['row']].colName = e['detail']['value']; 
}); 

Существует немного больше пример с контекстным подробно о мой блог на velociter.blogspot.co.uk

Надеюсь, это поможет!