在 ag-grid 中使用自定义单元格渲染器时无法读取未定义的属性“导航”

Posted 2023-03-28

【中文标题】在 ag-grid 中使用自定义单元格渲染器时无法读取未定义的属性“导航”

【英文标题】：Cannot read property 'navigate' of undefined while using custom cell-renderers in ag-grid

【发布时间】：2019-09-06 14:57:08

【问题描述】：

我正在使用 ag-grid 在我的 Angular 7.2.1 应用程序中呈现表格。自定义单元格渲染器只是在将重定向到不同页面的行中渲染一个编辑按钮。

我之前在不同 Angular 版本的不同应用程序中做过这个，但由于某种原因，这个 Angular 7 应用程序中的相同代码导致了这个。我想我可能遗漏了一些非常简单的东西。

我已经创建了我在这个堆栈闪电战中看到的错误的极简再现 - https://stackblitz.com/edit/angular-v98mjs

如果您单击编辑按钮，您将在控制台中看到此错误。

错误错误：无法读取未定义的属性“导航” ag-grid 版本：-

我正在为 ag-grid 使用以下版本：-

“ag-grid-angular”：“^20.2.0”，“ag-grid-community”：“^20.2.0”，

有关代码，请查看上面链接中的 stackblitz 代码。

【参考方案1】：

你需要用Arrow Function定义onEdit

onEdit = (row): void => 
  console.log('row is being edited', row)
    this.router.navigate(['/new-url',  id: row.incidentId ], 
        relativeTo: this.route.parent
    );
;

更多示例：ag-grid server side infinite scrolling accessing props

看看更新的 plunk：https://stackblitz.com/edit/angular-oppxte

没有arrow function，AppComponent 内部的onEdit 函数无法获取this.router 的引用，因此，您遇到了错误。

无法读取未定义的属性“导航”

我还引入了RootComponent 和NewComponent，以便在示例中实现更好的模块化。希望这一点很清楚。

【讨论】：

在没有人帮助的情况下解决棘手的问题！谢谢，这工作:)