【问题标题】:How to add a hyperlink in coiumn of dx-data-grid in Angular?如何在 Angular 的 dx-data-grid 的 coiumn 中添加超链接?
【发布时间】:2021-11-09 17:28:04
【问题描述】:
正在使用以下代码:
<dx-data-grid [dataSource]="openCasesdatasource" [showBorders]="true">
<dxi-column dataField="Picture" cellTemplate="cellTemplate"></dxi-column>
<div *dxTemplate="let data of 'cellTemplate'"><a [href]="data.url"></a></div>
</dx-data-grid>
这是需要显示的数据:
let abc: abc[] = [{
"picture": "harry",
"active": "true",
"url": "https://google.com"}]
【问题讨论】:
标签:
angular
devextreme
devextreme-angular
【解决方案1】:
HTML
<dx-data-grid
[dataSource]="openCasesdatasource"
[showBorders]="true"
(onCellClick)="openPicture($event)">
<dxi-column dataField="Picture" cellTemplate="cellTemplate">
<div *dxTemplate="let data of 'cellTemplate'">
<img src="data.value">
</div>
</dxi-column>
</dx-data-grid>
TS
openPicture(){
if (e.rowType == "data" && e.column.dataField === "Picture") {
if(e.value != null) {
window.open(e.value, "_blank");
}
}
}