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>`;
      },
    },
......