如何使 Mat-Table 中的列值成为超链接 [重复]

Posted 2023-02-22

【中文标题】如何使 Mat-Table 中的列值成为超链接 [重复]

【英文标题】：How to make a column value in Mat-Table a hyperlink [duplicate]

【发布时间】：2021-05-27 17:25:17

【问题描述】：

我有一个垫表，我必须在表的每一列值上放置一个超链接，并将 id 值传递给 API。为此，我尝试将列值包装在标签内，但这不起作用。 ID row.projectId 然后我尝试在那个地方使用一个按钮进行测试，并在 (click) 事件上传递 id 并且它有效。但我希望它是超链接标签，而不是按钮。

 <ng-container matColumnDef="Id">
                <mat-header-cell *matHeaderCellDef mat-sort-header>
                    ID
                </mat-header-cell>
                <mat-cell *matCellDef="let row"><button (click)="sendCall(row.Id)">row.Id</button> </mat-cell>
            </ng-container>

但我希望它看起来像这样并且能够在点击时传递值 - 有人可以帮忙吗？

【问题讨论】：

你试过 row.projectId

使用(click)="sendCall(row.sbId)" 而不是onclick。 onclick 是 javascript 函数，click 是 angular

嗨@NikhilWalvekar，我也试过（点击），但我没有在行上看到那个超链接符号。

@AnandSrivastava 要在 mat-table 中使用超链接，您可以查看 Stackblitz 中的链接。

【参考方案1】：

为什么需要<a> 标记中的click 事件处理程序？你可以绑定到href 属性。

试试下面的

<a href="/someRoute/row.Id">row.rowId</a>

【讨论】：

因为我需要将该 ID 传递给 API 以获取点击的每一行的数据。我不必打开链接什么的，href 会打开一个新链接。

那么我会说锚标签不是正确的选择。您可以使用<button> 并将其设置为看起来像一个链接。见这里：***.com/a/1368286/6513921

这看起来更好。谢谢