Angular 材料：如何 select 垫表中的特定垫单元？

Question

I have a mat table which displays list of Devices.

The code for it is

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

Now, On clicking a particular cell I want to add a style to it, inorder to indicate that it is active. But, when I try to do it using ngClass, The style gets added to all the cells.

Like this:

Please help.

Answer 1

You need to compare your selected value with your whole table Data

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

       this.addClass = true;
    }
    });

    }

in template

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

Answer 2

What you need, is to save the current clicked/selected cell and then bind the conditional styling on it. Something like this:

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

in template you would do:

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