angular-material - 如何从 ag-grid 单元格打开模态对话框单击 Angular 6

Question

想要在单击详细信息图标时打开一个垫对话框。但问题是 this 不是指类。它指的是当前网格。

    constructor(private dialog: MatDialog) {}

    ngOnInit() {
     this.gridOptions = <GridOptions>{
     rowSelection: 'multiple',
     floatingFilter: true
    };

    this.gridOptions.columnDefs = [
      { 
        headerName: 'Detail', field: '', filter: false, width: 80,
        sortable: false,
        onCellClicked: this.openModal,
        cellRenderer: (data) => {
          return `<mat-icon class="mat-icon material-icons" style="cursor:pointer;" aria-hidden="true">
          keyboard_capslock</mat-icon>`;
        }
     },
     { headerName: 'Field Name', field: 'fieldName'}
    ];    

    openModal(row): void {
       const detailRef = this.dialog.open(DetailComponent, {
         height: '100vw',
         width: '80vh',
         direction: 'ltr',
         data: {
          record: row.data
         }
     });

Error: Unable to get property 'open' of undefined or null reference

这里指的是 Grid 而不是类。

如何引用类方法打开对话框？

Answer 1

内联 cellRenderer 只能用于简单的情况。如果需要使用内部函数或连接第三方库，则必须写成custom cell renderer component。 .