Угловой 4: якоря routerLink в md-ячейке материала не будут работать
ОБНОВЛЕНО: md-таблица упакована в некоторые контейнеры с использованием директив flex layout, которые, кажется, вызывают эту проблему. Я обновляю код, чтобы показать эти обертки. В частности, fxLayoutGap во внешней оболочке разрушает приложение
У меня есть эта таблица данных в угловых 4, который показывает список записей из базы данных. При конкретном щелчке строки (на самом деле, щелчок ячейки) приложение предназначено для отображения подробных данных этой строки (другой URL-адрес в приложении). Я пытаюсь добиться этого с помощью якоря routerLink внутри md-клеток, как это:
<div class="main-content-container" fxLayoutGap="10px">
<div class="table-container mat-elevation-z8" fxLayout.xs="column">
<md-table #table [dataSource]="dataSource" fxFlex="100">
<ng-container cdkColumnDef="id">
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
<md-cell *cdkCellDef="let row">
<a [routerLink]="['/detail']">{{row.id}}</a>
</md-cell>
</ng-container>
...
</md-table>
</div>
</div>
Но когда я пробую это, я получаю странную ошибку в консоли браузера, которая кажется не связанной с чем-либо в моем коде:
ERROR Error: Uncaught (in promise): TypeError: _this._renderer.setStyle is not a function
TypeError: _this._renderer.setStyle is not a function
at base.js:107
at Array.forEach (<anonymous>)
at base.js:107
at Array.forEach (<anonymous>)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._applyStyleToElements (base.js:106)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._getFlowDirection (base.js:78)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._validateValue (flex.js:200)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._updateStyle (flex.js:192)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._onLayoutChange (flex.js:183)
at SafeSubscriber._next (flex.js:50)
at base.js:107
at Array.forEach (<anonymous>)
at base.js:107
at Array.forEach (<anonymous>)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._applyStyleToElements (base.js:106)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/base.js.BaseFxDirective._getFlowDirection (base.js:78)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._validateValue (flex.js:200)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._updateStyle (flex.js:192)
at FlexDirective.webpackJsonp.../../../flex-layout/flexbox/api/flex.js.FlexDirective._onLayoutChange (flex.js:183)
at SafeSubscriber._next (flex.js:50)
at resolvePromise (zone.js:770)
at resolvePromise (zone.js:741)
at zone.js:818
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)
Ну, очевидно, это что-то, что связано с якорем, но... не знаю, упускаю ли я какую-то концепцию или что-то еще, и примеров там немного.