グリッドセル内のユーザーコントロール

Question

ホーグリッドセルエディター内にユーザーコントロールを配置しますか？

列定義：

{ 
      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 })); 
} 
} 

しかし、アイテムをバインドするように見えるdoes notの。助けてもらえますか？

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

これは助けて！