Angular generic-ui 在单元格中设置自定义 href 链接

Question

我在 angular 版本中使用https://generic-ui.com/网格。

它工作正常。 我已经在其中显示了网格和所有数据。

现在我想在一个单元格中设置一个 href 链接。 但在那个单元格中，文本应该不同，href 链接也应该不同。

我遵循了他们的示例，但他们给出了文本和链接之类的示例，它们都是相同的，因此在单元格中的网格中显示了它。 请参阅下面的更多细节。

在下图中，您可以看到 LINK 列设置了 href 链接。 该代码如下。

{
        header: 'GuiCellView.LINK',
        field: 'wiki',
        type: GuiDataType.STRING,
        view: GuiCellView.LINK
    },

并且 wiki 字段在 .ts 文件中有这个值

const food = [{
    name: 'Avocado',
    wiki: 'https://en.wikipedia.org/wiki/Avocado',
    image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}];

但是我想在 wiki 中实现的应该是单击此处，当用户单击那里时它应该打开一个链接，但我没有找到任何方法来设置一些自定义链接。

我的意思是像在 wiki 中：“单击此处”——因此在单元格中它将显示单击此处，但我想在那里设置 href 链接。

你可以在这里看到演示： https://generic-ui.com/guide/columns

Answer 1

您可以使用自定义 HTML 来实现。

https://stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/string-food/string-food.component.ts

https://github.com/generic-ui/generic-ui/issues/11

......
    {
      header: 'GuiCellView.LINK',
      field: 'wiki',
      type: GuiDataType.STRING,
      view: (value: string, obj: any) => {
        return `<a href="${value}" target="_blank">${obj.name}</a>`;
      },
    },
......