如何在 ng-grid cellRenderer 中调用引导模式？答案

【问题标题】：How to call a bootstrap modal inside ng-grid cellRenderer?如何在 ng-grid cellRenderer 中调用引导模式？
【发布时间】：2018-11-01 00:28:23
【问题描述】：

我是 Angular6 的新手。我正在使用ag-grid 和ng-bootstrap。

我有一个包含使用cellRenderer 呈现的按钮的单元格。我希望该按钮调用用于打开引导模式的函数。我不知道如何在 cellRenderer 中调用引导模式。

myApp.component.ts

export class MyAppComponent implements OnInit{
  
  constructor(private modalService: NgbModal){}
  
  columnDefs = [
    {headerName: 'name', field:'name'},
    {headerName: 'edit', cellRenderer: this.editCellRenderer}
  ];
  
  rowData = [
    {name:'foo', edit:''},
    {name:'bar', edit:''}
  ];
  
  ngOnInit(){}
  
  editCellRenderer(params){
    var div = document.createElement('div');
    div.innerHTML = '<button class="btnEdit">edit</button>';
    var btnEdit = div.querySelectorAll('.btnEdit')[0];
    
    btnEdit.addEventListener('click', function(){
      //Have no idea how to call bootstrap modal successfully :(
    });
    
    return div;
  }
  
  open(content){
    this.modalService.open(content);
  }
  
}

myApp.component.html

<ag-grid-angular 
    style="width: 100%; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>One fine body&hellip;</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    </div>
</ng-template>
      
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

我真的被困住了，真的需要帮助。感谢大家花时间解决我的问题。

【问题讨论】：

再通过btnEdit.addEventListner`里面的open函数检查一下？？
如果我在 cellRenderer 之外调用函数。我会抛出一个错误'ERROR TypeError: this.open is not a function'。 @Sanoj_V
看看你是不是只放this.modalService.open(content); 给出同样的错误？？
TypeError: Cannot read property 'open' of undefined @Sanoj_V 好像我不能在 cellRenderer 之外调用任何函数。
好的。您是否需要在单击编辑按钮以获取相同数据时打开模式弹出窗口，对吗？？

标签： angular ag-grid angular6

【解决方案1】：

我遇到了类似的问题，我认为这是因为在调用您的方法时“this”未定义（尝试在您的 editCellRenderer 方法中执行 console.log(this)）。我通过告诉我的渲染器运行它的上下文（即this）克服了这个问题，但我不确定这是“正确”的方法。我在列定义中使用了cellRendererFramework 属性，我认为这是推荐给Angular 的方法。这是我的列的列定义：

{
  cellRendererFramework: GridCellActionsComponent,
  cellRendererParams: {
    parent: this
  }
}

我的GridCellActionsComponent 类包含以下内容：

export interface IGridCellActionPars {
parent: IGridCellActions
}
export class GridCellActionsComponent implements AgRendererComponent {
private gridCellActionPars: IGridCellActionPars;
agInit(cellRendererParams: ICellRendererParams): void {
  this.gridCellActionsPars = cellRendererParams['gridCellActionsPars'];
}
private editButtonClick(): void {
  this.gridCellActionsPars.parent.editButtonClick();
}

【讨论】：