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

Question

我想知道如何将超链接添加到 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,
     CategoryName: "Beverages",
     CompanyName: "Bon app'",
     ShipCountry: "France",
     ShippedDate: new Date("1997-04-21T00:00:00Z"),
     Website: "https://www.google.com/"
   },
  ]

Answer 1

可以通过使用 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 文档中列出了 IgxCell 的所有属性 here and more about IgxColumnComponent can be found here。

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

add hyperlink to a column in igx-grid

infragistics

angular

ignite-ui-angular

igx-grid