Question

根据Angular Material official documents， MdTable建立在CdkTable的顶部。

如果将routeLink元素的a属性放在md-cell元素的表达式中，例如

<ng-container cdkColumnDef="name">
  <md-header-cell *cdkHeaderCellDef> Name</md-header-cell>
  <md-cell *cdkCellDef="let row" >
    <a routerLink="/customers/{{row.id}}">{{row.name}}</a>
  </md-cell>
</ng-container>

控制台中的错误堆栈：

core.es5.js:1020 ERROR Error: Uncaught (in promise):TypeError:renderer.setAttribute is not a function
TypeError: renderer.setAttribute is not a function
at MdTable.CdkTable (cdk.es5.js:1869)
at new MdTable (material.es5.js:20855)
at createClass (core.es5.js:10924)
at createDirectiveInstance (core.es5.js:10742)
at createViewNodes (core.es5.js:12178)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at createViewNodes (core.es5.js:12205)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at MdTable.CdkTable (cdk.es5.js:1869)
at new MdTable (material.es5.js:20855)
at createClass (core.es5.js:10924)
at createDirectiveInstance (core.es5.js:10742)
at createViewNodes (core.es5.js:12178)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at createViewNodes (core.es5.js:12205)
at callViewAction (core.es5.js:12624)
at execComponentViewsAction (core.es5.js:12533)
at resolvePromise (zone.js:784)
at resolvePromise (zone.js:755)
at zone.js:832
at ZoneDelegate.webpackJsonp.682.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.682.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.682.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:596)
at <anonymous>

问题的根本原因是{{row.id}}的值routerLink。

当我更改a元素时，异常将消失。

<a (click)="navigate(row)">{{row.name}}</a>

navigate是component中定义的自定义函数。

Answer 1

我不认为这与MdTable有任何关系，并且会发生在您尝试使用routerLink的任何地方。您没有绑定到row.id，而是将字符串"/customers/{{row.id}}"作为目标传递，routerLink似乎正在绊倒。

相反，试试这个，

<a [routerLink]="['/customers', row.id]">{{row.name}}</a>

routeLink不使用Angular Material MdTableModule / CdkTableModule md-cell

1 个答案: