单击单元格按钮以在Ag Grid中显示角度材质2模态窗口

Question

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

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 material-table点击每个条目的第一列时打开material-modal（1,2,3）等等，你应该能够轻松地将这个例子扩展到你的用例。

编辑：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) { }
}

Answer 2

这将帮助您：

 onRowClicked(event) {
    this.dialog.open(Component);
  }