Angular中如何给dx-data-grid组件的列添加超链接？

正确实现方案 #

你当前的代码存在2个核心错误导致功能失效：

• 超链接<a>标签内部没有填充显示文本，界面上看不到可点击的元素
• dx-data-grid的cellTemplate返回的是单元格上下文对象，行数据需要通过上下文变量.data属性访问，直接写data.url无法取到实际字段值

1. 组件模板代码

<dx-data-grid [dataSource]="openCasesdatasource" [showBorders]="true">
  <dxi-column dataField="picture" cellTemplate="cellTemplate"></dxi-column>
  <div *dxTemplate="let cellInfo of 'cellTemplate'">
    <!-- 可根据需求添加target="_blank"控制是否新页面打开 -->
    <a [href]="cellInfo.data.url" target="_blank">{{ cellInfo.data.picture }}</a>
  </div>
</dx-data-grid>

2. 组件类代码

// 定义行数据类型
interface Abc {
  picture: string;
  active: string;
  url: string;
}

// 组件内声明数据源
openCasesdatasource: Abc[] = [];

ngOnInit() {
  // 给数据源赋值
  this.openCasesdatasource = [{
    "picture": "harry",
    "active": "true",
    "url": "https://google.com"
  }];
}

可选优化

如果需要走Angular内部路由跳转而非打开外链，可以替换为routerLink指令实现：

<a [routerLink]="['/自定义路由路径', cellInfo.data.主键字段]">{{ cellInfo.data.picture }}</a>

内容的提问来源于stack exchange，提问作者Ritika Singh