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

上有一个稍微长一点的上下文细节示例

希望这有帮助！

用户控制ag-grid单元内部

1 个答案: