Я занимаюсь разработкой приложения Angular 5, и у меня есть таблица угловых материалов, отображающая некоторые данные. Я хочу, чтобы пользователь мог выбрать графический элемент вне таблицы и в функции click
выбрать соответствующую строку в моей таблице.
Я попытался создать ViewChild
из Mat-Table
, но мне не удалось получить ссылку на выбранную строку. Определение, похоже, также не дает никаких подсказок. Вот мой стол:
<!-- Table -->
<div id="table-container" style="height: 240px; width: 100%; overflow: auto;">
<mat-table #table
class="mat-table"
[dataSource]="dataSource"
style="height: 100%; padding: 0px; margin: 0px; border-top: 1px solid rgba(0, 0, 0, 0.12);">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Device Name Column -->
<ng-container matColumnDef="DeviceName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Device </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.deviceName}} </mat-cell>
</ng-container>
<!-- Location Name Column -->
<ng-container matColumnDef="LocationName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Location </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.locationName}} </mat-cell>
</ng-container>
<!-- Header Row -->
<mat-header-row *matHeaderRowDef=""></mat-header-row>
<!--<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>-->
<!-- Row Definition -->
<mat-row *matRowDef="let row; columns: displayedColumns; let index=index;"
[ngClass]="setRowClass(index)"
(click)="onClickRow(row, $event, index)"
(mouseenter)="onMouseEnterRow(index)"
(mouseleave)="onMouseLeaveRow(index)">
</mat-row>
</mat-table>
</div>
Любые предложения приветствуются. Спасибо.