Javascript 角度材质：如何在材质表中选择特定的材质单元格？

我有一个显示设备列表的mat表

它的代码是

<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>

搜索
关闭
{{element.VIN}
正在加载数据。。。
没有数据。

现在，单击一个特定的单元格，我想向它添加一个样式，以指示它处于活动状态。但是，当我尝试使用ngClass时，样式会添加到所有单元格中

像这样：

---

请提供帮助。

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

   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>

{{element.VIN}

您需要的是保存当前单击/选定的单元格，然后在其上绑定条件样式。大概是这样的：

public currentCell;
public onClick(cell): void{
this.currentCell = cell;
}

在模板中，您将执行以下操作：

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

{{element.VIN}

谢谢您的回答。我尝试过这种方法，但它不起作用，因为当您单击单元格时应用样式，它将应用于所有单元格，因为所有单元格都具有相同的类。