Angular 单击“单元”按钮以Ag栅格显示“角度材质2”模式窗口

我在Angular 5中使用Ag网格。这里我展示了来自api的数据。我使用角材料2进行设计。我想在ag网格中包含一个按钮，我在其中单击该按钮。单击按钮后，将打开一个角度材质模式。我试了很多时间，但还是想不出来。有什么解决办法吗

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>

[！[在此处输入图像描述][1][1]

我不熟悉ag grid的具体工作方式，

材料表

在单击每个条目（1、2、3等）的第一列时会打开一个

材料模式

，您应该能够轻松地将此示例扩展到您的用例中

编辑：ag网格版本

您可以收听

行单击

事件以显示模式。看看这个实现：

这将帮助您：

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

---

请分享你现有的代码我已经分享了我的代码@bugsLet我看看我是否有时间用ag Grid实现它我已经修改了答案，加入了一个ag Grid的例子这很简单。我应该这么做的。非常感谢@bugsGlad，这很有帮助。考虑把答案标记为接受，如果它解决了你的问题，以便其他人能从它受益于未来的点击不真正回答这个问题。如果您的行有许多按钮怎么办？我看到了CellClicked事件，您可以查看单击了哪个列并相应地进行处理。但是，如果你的手机有多个按钮呢？Ag Grid并没有让这变得容易。