Angular 材料：如何 select 墊表中的特定墊單元？

Question

我有一個顯示設備列表的墊子表。

它的代碼是

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