将超链接添加到 igx-grid 中的列

如何解决将超链接添加到 igx-grid 中的列

我想知道如何向 igx-grid 中的单个列添加超链接？ 这是一个示例数据：

  export const DATA: any[] = [
    {
     OrderID: 10524,SaleAmount: 3192.65,CategoryName: "Beverages",CompanyName: "Berglunds snabbköp",ShipCountry: "France",ShippedDate: new Date("1997-05-07T00:00:00Z"),Website: "https://www.infragistics.com/"
   },{
     OrderID: 10511,SaleAmount: 2550.0,CompanyName: "Bon app'",ShippedDate: new Date("1997-04-21T00:00:00Z"),Website: "https://www.google.com/"
   },]

解决方法

可以使用 cell templates 在 igxCell 中添加超链接：

<igx-column field="Website" header="Website" [dataType]="'string'" [minWidth]='"200px"'>
    <ng-template igxCell let-cell="cell">
        <a class="truncate" href="{{cell.value}}" target="_blank">{{cell.value}}</a>
    </ng-template>
</igx-column>

Here 您可以找到演示如何实现所需行为的 stackblitz 示例。

此外，Infragistics 文档 here 中列出了 IgxCell 的所有属性，有关 IgxColumnComponent 的更多信息可以在 here 中找到。