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

Question

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

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

我创建了我在这个 stackblitz 中看到的错误的极简再现 - https://stackblitz.com/edit/angular-v98mjs

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

ERROR Error: Cannot read property 'navigate' of undefined ag-grid versions:-

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

"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",

代码请看上面link中的stackblitz代码。

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

更多这样的例子：

查看更新后的插件：https://stackblitz.com/edit/angular-oppxte

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

Cannot read property 'navigate' of undefined

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