Angular Material DataTable添加编辑链接失效问题求助

你遇到的问题是因为Angular插值表达式的使用方式错误，导致user.id没有被正确注入到链接路径中。

错误原因 #

你原来的代码里，把{{user.id}}放在了字符串拼接的语法里：

href="#/categorias/usuarios/detalle/' + {{user.id}} + '"

这不符合Angular的模板语法规则——插值表达式{{}}不能嵌套在这种字符串拼接的写法里，Angular无法正确解析这个表达式，所以最终渲染时只保留了基础路径，丢失了用户ID。

正确的写法 #

这里有两种可行的修复方式：

1. 直接使用插值表达式拼接路径

把user.id直接通过插值表达式插入到完整路径中：

<ng-container matColumnDef="action">
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
  <mat-cell *matCellDef="let user">
    <a href="#/categorias/usuarios/detalle/{{user.id}}" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">
      <i class="fa fa-edit"></i>
    </a>
  </mat-cell>
</ng-container>

2. 使用Angular属性绑定（推荐）

用方括号[href]来绑定一个TypeScript表达式，直接拼接字符串和user.id：

<ng-container matColumnDef="action">
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
  <mat-cell *matCellDef="let user">
    <a [href]="'#/categorias/usuarios/detalle/' + user.id" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">
      <i class="fa fa-edit"></i>
    </a>
  </mat-cell>
</ng-container>

额外优化：使用Angular RouterLink（更规范） #

如果你的项目使用了Angular Router，建议用routerLink指令代替原生的href，这样更符合Angular的路由规范，也能自动处理路由的哈希模式等配置：

<ng-container matColumnDef="action">
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
  <mat-cell *matCellDef="let user">
    <a [routerLink]="['/categorias/usuarios/detalle', user.id]" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">
      <i class="fa fa-edit"></i>
    </a>
  </mat-cell>
</ng-container>

这种方式不需要手动添加#，Angular会根据你的路由配置自动生成正确的链接地址。

内容的提问来源于stack exchange，提问作者Pedro