在 ag-grid 中实现一个按钮

Question

我正在尝试学习 ag-grid 的 this example，以便在网格的每一行中创建一个删除按钮。上述示例有效，但我的代码无效，我不明白为什么。

我附上了我的代码，希望有人能帮助我。

home.component.ts:

@Component({
  selector: 'home',
  providers: [
    Title
  ],
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  private items: Item[] = [];
  private gridOptions:GridOptions;
  private columnDefs = [];

  constructor(
    private itemsService: ItemsService
  ) {
    this.gridOptions = {};
    this.columnDefs = this.createColumnDefs();
  }

  remove() {
    alert("yey!")
  }

  ngOnInit(){
    this.itemsService
      .getAll()
      .subscribe(result => {
        this.items = result;
      });
  }

  private createColumnDefs() {
    return [
      {
        headerName: "Foo",
        field: "foo",
        width: 100,
      },
      {
        headerName: "Bar",
        field: "bar",
        width: 100,
      },
      {
        headerName: "",
        field: "_id",
        cellRendererFramework: RemoveButton,
        colId: "params",
        width: 100
      },
    ];
  }
}

home.component.html:

<div>
      <ag-grid-angular #agGrid style="width: 602px; height: 350px;" class="ag-fresh"
                       [gridOptions]="gridOptions"
                       [columnDefs]="columnDefs"
                       [rowData]="items">
      </ag-grid-angular>
  </div>

RemoveButton.ts:

@Component({
  selector: 'remove-button',
  template: `<span><button style="height: 20px" (click)="remove()">X</button></span>`
})
export class RemoveButton implements ICellRendererAngularComp {
  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public remove() {
    this.params.context.componentParent.remove();
  }
}

网格显示了所有数据，但单击按钮产生此错误：

ERROR TypeError: Cannot read property 'componentParent' of undefined
    at RemoveButton.webpackJsonpac__name_.453.RemoveButton.remove

表示 params 的 context 未定义。

如果需要任何进一步的代码或信息，请告诉我。

Answer 1

我的问题已经解决了。显然 context 是未定义的，因为我没有定义它。在 gridOptions 中定义上下文解决了这个问题：

this.gridOptions ={
      context: {
        componentParent: this
      }
    };

在 ag-grid 中实现一个按钮

Implementing a button in ag-grid

ag-grid

angular