angular - 单击单元格按钮以在 Ag 网格中显示 Angular-Material 2 模态窗口

Question

我在 Angular 5 中使用 Ag Grid。这里我显示来自 api 的数据。我使用 Angular Material 2 进行设计。我想在 ag-grid 中包含一个按钮，我可以在其中单击该按钮。单击按钮后，将打开一个 Angular Material 模态。我尝试了很多时间但无法弄清楚。有什么办法解决吗？

company.component.ts

export class CompanyComponent implements OnInit {
private gridApi;
private gridColumnApi;
public columnDefs;

constructor(private httpClient: HttpClient, public snackbar: MatSnackBar, 
public dialog: MatDialog) {
this.columnDefs = [
  {
    headerName: 'Action',
    field: 'action',
    width: 150,
    suppressFilter: true,
    },
  {
    headerName: 'Id',
    field: 'id',
    filter: 'agNumberColumnFilter',
    width: 80,
    maxWidth: 100,
    suppressMenu: true
  },
  {
    headerName: 'Company Name',
    field: 'companyName',
    width: 160,
    suppressMenu: true
  },
  {
    headerName: 'Address',
    field: 'companyAddress',
    width: 160,
    suppressFilter: true,
    },
  {
    headerName: 'Phone',
    field: 'phone',
    width: 130,
    suppressMenu: true
  },
  {
    headerName: 'Fax',
    field: 'fax',
    width: 130,
    suppressMenu: true
  },
  {
    headerName: 'Email',
    field: 'email',
    width: 150,
    suppressMenu: true

  },
  {
    headerName: 'Note',
    field: 'note',
    width: 200,
    suppressFilter: true
    },
  {
    headerName: 'Activation Status',
    field: 'appConfActivationStatusStatusName',
    width: 70,
    suppressMenu: true
  }
 ];
}

getCompanyInfo(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.httpClient.get('http://192.168.10.208:9092/hrm/companyList')
  .subscribe(
    data => {
      params.api.setRowData(data);
    },
    msg => {
      console.error(`Error: ${msg.status} ${msg.statusText}`);
    }
  );

  }
}

company.component.html

  <ag-grid-angular
#agGrid
style="width: 100%; height: 80%;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[enableSorting]="true"
[paginationPageSize]="5"
[pagination]="true"
[enableColResize]="true"
[enableFilter]="true"
[floatingFilter]="true"
(gridReady)="getCompanyInfo($event)">
[![enter image description here][1]][1]</ag-grid-angular>

Answer 1

我不熟悉ag-grid的具体工作原理，this is a working demo单击每个条目的第一列(1、2、3 等)时打开一个 material-modal 的 material-table ，您应该能够轻松将此示例扩展到您的用例。

编辑:ag-grid版本

您可以监听rowClicked事件来显示模式。看看这个实现:

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 80%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [enableSorting]="true"
    [paginationPageSize]="5"
    [pagination]="true"
    [enableColResize]="true"
    [enableFilter]="true"
    [floatingFilter]="true"
    (rowClicked)="openDialog()"
    (gridReady)="getCompanyInfo($event)">
 </ag-grid-angular>

export class CompanyComponent implements OnInit {
private gridApi;
private gridColumnApi;
public columnDefs;

constructor(private httpClient: HttpClient, public snackbar: MatSnackBar, 
public dialog: MatDialog) {
this.columnDefs = [
  {
    headerName: 'Action',
    field: 'action',
    width: 150,
    suppressFilter: true,
    },
  {
    headerName: 'Id',
    field: 'id',
    filter: 'agNumberColumnFilter',
    width: 80,
    maxWidth: 100,
    suppressMenu: true
  },
  {
    headerName: 'Company Name',
    field: 'companyName',
    width: 160,
    suppressMenu: true
  },
  {
    headerName: 'Address',
    field: 'companyAddress',
    width: 160,
    suppressFilter: true,
    },
  {
    headerName: 'Phone',
    field: 'phone',
    width: 130,
    suppressMenu: true
  },
  {
    headerName: 'Fax',
    field: 'fax',
    width: 130,
    suppressMenu: true
  },
  {
    headerName: 'Email',
    field: 'email',
    width: 150,
    suppressMenu: true

  },
  {
    headerName: 'Note',
    field: 'note',
    width: 200,
    suppressFilter: true
    },
  {
    headerName: 'Activation Status',
    field: 'appConfActivationStatusStatusName',
    width: 70,
    suppressMenu: true
  }
 ];
}

openDialog(): void {
    let dialogRef = this.dialog.open(DialogDataExampleDialog, {
      width: '250px'
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

getCompanyInfo(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.httpClient.get('http://192.168.10.208:9092/hrm/companyList')
  .subscribe(
    data => {
      params.api.setRowData(data);
    },
    msg => {
      console.error(`Error: ${msg.status} ${msg.statusText}`);
    }
  );

  }
}

@Component({
  selector: 'dialog-data-example-dialog',
  template: '123',
})
export class DialogDataExampleDialog {
  constructor( @Inject(MAT_DIALOG_DATA) public data: any) { }
}