ag-Grid 打印功能 - Angular答案

【问题标题】：ag-Grid Print functionality - Angularag-Grid 打印功能 - Angular
【发布时间】：2019-01-18 00:33:10
【问题描述】：

我已经成功地在我的项目中使用 angular 实现了 ag-Grid。现在尝试通过以下官方 ag-Grid 文档https://www.ag-grid.com/javascript-grid-for-print/ 打印 ag-Grid 数据。

我在 onCellDoubleClicked() 方法下调用该打印功能方法。双击单元格时，应打开 ag-grid 数据打印窗口。但我收到类似“ERROR TypeError: l.setDomLayout is not a function”的错误。

这是我创建方法的方式。

onCellDoubleClicked($event) { 
var gridApi = this.gridApi; 
this.setPrinterFriendly(gridApi); 
setTimeout(function() { 
print(); 
this.setNormal(gridApi); 
}, 2000); 
} 
setPrinterFriendly(api) { 
var eGridDiv = document.querySelector(".my-grid"); 
this.style.width = ""; 
this.style.height = ""; 
api.setDomLayout("print"); 
} 
setNormal(api) { 
var eGridDiv = document.querySelector(".my-grid"); 
this.style.width = "600px"; 
this.style.height = "200px"; 
api.setDomLayout(null); 
}

任何有想法的人请告诉我，我做错了什么或正确的方法。提前致谢。

这是错误：

【问题讨论】：

您正在将“gridApi”传递给“setPrinterFriendly()”和“setNormal()”函数......如果你不向这些函数传递任何东西而不是api.setDomLayout("print");，你会发生什么做this.gridApi.setDomLayout("print");？
感谢您的建议，是的，我已经这样更改了，但没有用。仍然收到相同的错误，例如“错误类型错误：this.gridApi.setDomLayout is not a function”
如果你发起一个最小的堆栈闪电战，肯定会有人帮忙
不确定您是否已经解决了该问题，但请检查您的 ag-grid 版本。他们的文档没有提到这个 setDomLayout API 适用于哪个版本，但似乎是在v19 之后添加的。
@wctiger 是的，问题得到了解决。是的，你是对的，我使用的是 v18，升级到最新版本后问题得到了解决。

标签： angular ag-grid

【解决方案1】：

既然你尝试了this.gridApi.setDomLayout 并且仍然得到'this.gridApi.setDomLayout is not a function error'，我猜this.gridApi 是未定义的。所以将它添加到你的 JavaScript 文件中。

onGridReady(params) {
   this.gridApi = params.api;
}

还有这个属性

(gridReady)="onGridReady($event)"

在<ag-grid-angular> 标签内

【讨论】：

能否把完整的代码贴在这里以便调试。