Question

我是Angular6的新手。我正在与ag-grid和ng-bootstrap进行交流。

我有一个包含使用cellRenderer呈现的按钮的单元格。我喜欢那个按钮来调用一个函数来打开bootstrap模态。我无法弄清楚如何在cellRenderer中调用bootstrap模态。

myApp.component.ts

＆＃13;

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);
  }
  
}

＆＃13;

myApp.component.html

＆＃13;

<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>

＆＃13;

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

Answer 1

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

cellRendererFramework

我的{ cellRendererFramework: GridCellActionsComponent, cellRendererParams: { parent: this } }课程包含以下内容：

GridCellActionsComponent

如何在ng-grid cellRenderer中调用bootstrap模式？

1 个答案: