Таблица угловых материалов - выберите строку с помощью кода - PullRequest
0 голосов
/ 07 мая 2018

Я занимаюсь разработкой приложения 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>

Любые предложения приветствуются. Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...