角材料：如何在垫台中选择特定的垫单元？

Question

我有一个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>

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

赞：

请帮助。

Answer 1

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

   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>

Answer 2

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

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>