在Angular Material DataTable中添加链接

Question

我正在使用 Angular Material Data Table 进行工作，我想在表格的每一行中添加“编辑”链接，因此我进行以下操作：

  <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>

但是它不起作用，首先它不是一个链接，在chrome调试器中显示为：

<a class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" ng-reflect-href="#/categorias/usuarios/detalle/">
                <i class="fa fa-edit"></i>
              </a>

我做错了什么？为什么链接没有有效的href属性，而且没有id为row的元素？谢谢。

- Pedro

---

为此创建 StackBlitz。 - Antoniossss

Answer 1

这将起作用

<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">

同时检查user.id是否设置。如果user.id为undefined、null或空字符串，则会给出类似的输出。我的例子涵盖了其中的2个。

https://stackblitz.com/edit/angular-ko8uwa

- Antoniossss

---

这很奇怪，我一直收到一个类似于 <a class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" ng-reflect-href="#/categorias/usuarios/detalle/"></a> 的链接，可能是与 material datattable 有关吗？ - Pedro

也有可能 user.id===undefined，并且它将被省略。 - Antoniossss

我不知道为什么我的API在Chrome控制台中将a href更改为ng-reflect-href，这太奇怪了 <a ng-reflect-href="#/categorias/usuarios/detalle/"></a>。我修改了另一个stackblitz，它可以工作，但是在我的API中却不能。 - Pedro

ng-reflect 只是调试信息，不会出现在生产构建中。 - Antoniossss

https://stackblitz.com/edit/angular-8dpwye-a7pwbe 仍然可以使用绑定语法 [href]。 - Antoniossss