角形材料表在单击时突出显示一行

Question

如何在点击的行中添加“突出显示”-角度8

我有这张桌子：

<ng-container *ngIf="videos$ | async as videos">
<mat-table [dataSource]="videos" *ngIf="videos.length">
    <ng-container matColumnDef="play">
        <mat-header-cell *matHeaderCellDef trans>Play</mat-header-cell>
        <mat-cell *matCellDef="let video">
        <button mat-flat-button class="mat-flat-button mat-accent ng-star-inserted" color="accent" (click)="playVideo(video)">
           <mat-icon [svgIcon]="video.type === 'external' ? 'open-in-new' : 'play-arrow'" style="color:#f3edbe;"></mat-icon>
            <span class="alfadown">Link</span>
        </button>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="favicon">
        <mat-header-cell *matHeaderCellDef>Player</mat-header-cell>
        <mat-cell *matCellDef="let video">
            <img class="domain-favicon" [src]="getFavicon(video.url)" alt="Video domain favicon">
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef trans>Name</mat-header-cell>
        <mat-cell *matCellDef="let video" (click)="playVideo(video)">
            <mat-icon svgIcon="play-arrow" class="play-icon"></mat-icon>
            <div [innerHTML]="video.name"class="video-name">{{video.name}}</div>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="quality">
        <mat-header-cell *matHeaderCellDef trans>Quality</mat-header-cell>
        <mat-cell *matCellDef="let video">
            <div class="name">{{video.quality}}</div>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="created_at">
        <mat-header-cell *matHeaderCellDef trans>Added At</mat-header-cell>
        <mat-cell *matCellDef="let video">{{video.created_at | formattedDate}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="report">
        <mat-header-cell *matHeaderCellDef trans>Report</mat-header-cell>
        <mat-cell *matCellDef="let video">
            <button mat-icon-button class="report-button" [disabled]="loading$ | async" (click)="reportVideo(video)">
                <mat-icon svgIcon="report"></mat-icon>
            </button>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="edit">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let video">
            <edit-title-video-widget [video]="video"></edit-title-video-widget>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="['play', 'favicon', 'name', 'quality', 'created_at', 'report', 'edit']"></mat-header-row>
    <mat-row *matRowDef="let video; columns: ['play', 'favicon', 'name', 'quality', 'created_at', 'report', 'edit']"></mat-row> 
</mat-table>

我想添加这样的scss代码：

.highlight {
background: #ababab url(/eye.png) no-repeat right center;
padding: 1px 30px 1px 1px;

}

基本上，我想在每行的右侧显示一个图像，用户可以在其中单击。

这应该有助于用户区分他们打开的链接和未打开的链接。

如果有人可以提供帮助，请根据上面的代码示例添加代码，我将不胜感激。

Answer 1

 <mat-row *matRowDef="let row; columns: displayColumn;" 
          (click)="onRowClicked(row)" 
          [ngClass]="{highlighted: selectedIndex === row.key  }" 
          (mouseover)="highlight(row)">
</mat-row>

并且您的突出显示（行）和onRowClicked（行）是...

   onRowClicked(row) {
        console.log('row clicked ' + JSON.stringify(row));
        const index = this.listData.data.indexOf(row);
        console.log( ' Index ' + index);
  }
  highlight(row) {
      this.selectedIndex = row.key;
  }

基于“ selectedIndex，您可以显示或隐藏该行中的元素。