时间戳

首页 > 解决方案 > Angular Material：如何在 mat-table 中选择特定的 mat-cell？

javascript - Angular Material：如何在 mat-table 中选择特定的 mat-cell？

问题描述

我有一个显示设备列表的垫子表。

设备截图列表

它的代码是

<mat-table [dataSource] = "deviceDataList">
    <ng-container matColumnDef="numbers">
        <mat-header-cell *matHeaderCellDef>
             <div class="search-container">
                   <mat-form-field class="search-form-field no-line" floatLabel="never">
                         <button mat-button matPrefix mat-icon-button aria-label="Search" (click)="applyFilter()">
                               <mat-icon>search</mat-icon>
                         </button>
                    <input matInput [(ngModel)] = "searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()">
                         <button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="searchKey" (click)="onSearchClear()">
                               <mat-icon>close</mat-icon>
                         </button>
                    </mat-form-field>
                                </div>
                            </mat-header-cell>
                            <mat-cell [ngClass]="{'mat-style':true, 'mat-selected-style':btnValue}"  (click)="onDeviceSelect(element)" *matCellDef="let element">
                                <!-- {{element.model.instrument.VIN}}  -->
                                {{element.VIN}} 
                            </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="loading">
                            <mat-footer-cell *matFooterCellDef colspan="6">
                                Loading Data...
                            </mat-footer-cell>
                        </ng-container>
                        <ng-container matColumnDef="noData">
                            <mat-footer-cell *matFooterCellDef colspan="6">
                                No Data.
                            </mat-footer-cell>
                        </ng-container>
                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                        <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':deviceDataList!=null}"></mat-footer-row>
                        <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(deviceDataList!=null && deviceDataList.data.length==0)}"></mat-footer-row>
    </mat-table>

现在，单击特定单元格时，我想为其添加样式，以表明它处于活动状态。但是，当我尝试使用 ngClass 执行此操作时，样式会添加到所有单元格中。

像这样：

屏幕截图选定的设备列表

请帮忙。

标签： javascriptcssangularangular-material

解决方案

您需要将您选择的值与整个表格数据进行比较

   onDeviceSelect(element){
    this.addClass = false;
    this.tableData.forEach(element = > {
      if(element.VIN === event.VIN) {

       this.addClass = true;
    }
    });

    }

在模板中

 <mat-cell [ngClass]="{'mat-selected-style':addClass}"  (click)="onDeviceSelect(element)" *matCellDef="let element">
                                <!-- {{element.model.instrument.VIN}}  -->
                                {{element.VIN}} 
                            </mat-cell>

推荐阅读