Angular 4材料表突出顯示一行

Question

我正在尋找一種很好的方法來高亮顯示md表中的整行。
我應該做指令還是什麼？
任何人都可以幫助我嗎？

<div class="example-container mat-elevation-z8"> 
    <md-table #table [dataSource]="dataSource"> 

    <!--- Note that these columns can be defined in any order. 
      The actual rendered columns are set as a property on the row definition" --> 

    <!-- ID Column --> 
    <ng-container cdkColumnDef="userId"> 
     <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> 
    </ng-container> 

    <!-- Progress Column --> 
    <ng-container cdkColumnDef="progress"> 
     <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container cdkColumnDef="userName"> 
     <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container cdkColumnDef="color"> 
     <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> 
     <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
    </md-table> 
</div> 

表來源：https://material.angular.io/components/table/overview

Answer 1

您可以通過使用ngClass和像selectedRowIndex標誌做到這一點。無論何時點擊行索引等於selectedRowIndex，該類將被應用。

Plunker demo

HTML：

<!-- Add the highlight class in row definiton of md-table --> 
<!-- Add click event to pass the selected row index --> 

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
     [ngClass]="{'highlight': selectedRowIndex == row.id}" 
     (click)="highlight(row)"> 
</md-row> 

CSS：

.highlight{ 
    background: #42A948; /* green */ 
} 

TS：

selectedRowIndex: number = -1; 

highlight(row){ 
    this.selectedRowIndex = row.id; 
} 

Answer 2

所以，我就遇到了這個問題爲好。我使用的是較新的「mat-」而不是「MD-」，但我猜這將是差不多的...

<mat-row 
    *matRowDef="let row; columns: myColumns; let entry" 
    [ngClass]="{ 'my-class': entry.someVal }"> 
</mat-row> 

我沒有找到任何地方，我剛纔試了一下它碰巧出現了，所以我希望這是正確的。最重要的事情是標記'讓進入'到其他matRowDef東西的末尾。對不起，我很晚參加派對。希望這可以讓一些人變得更好。

Answer 3

在table overview examples頁面中，他們解釋了處理選擇的SelectionModel - 順便也處理多選。我想，未來的改進將會融入到未來的改進中，所以現在開始使用它是個好主意。

selection是在您的組件中定義的SelectionModel。我找不到任何實際的文件，但implementation是非常簡單的。

selection = new SelectionModel<CustomerSearchResult>(false, null); 

第一個參數是allowMultiSelect，因此允許一次選擇多個項目將其設置爲true。如果設置爲false，則選擇模型將在您設置新值時取消選擇任何現有值。

然後添加一個點擊事件到select()該行，並創建自己的CSS類，當該行被選中。

<mat-table> 
     ... 

     <mat-row *matRowDef="let row; columns: displayedColumns;" 
       [ngClass]="{ 'selected': selection.isSelected(row)}" 
       (click)="selection.select(row)"></mat-row> 

    </mat-table> 

的CSS類我加低於（樣品中沒有提到的造型還），然後你只需要添加到你的CSS

.mat-row { 
    min-height: 65px; 

    &.selected { 
     background: #dddddd; 
    } 
} 

如果你的背景顏色太暗你」你需要自己添加樣式來反轉文本顏色。

要處理選擇，請使用onChange事件selection。

// selection changed 
    this.selection.onChange.subscribe((a) => 
    { 
     if (a.added[0]) // will be undefined if no selection 
     { 
      alert('You selected ' + a.added[0].fullName); 
     } 
    }); 

或者選擇的項目在this.selection.selected。

我希望mat-table得到改善，像這樣的常見情況下，他們不只是把一切留給開發者。像鍵盤事件等事情會很好自動處理相對於選擇模型。

---

提示：請注意，如果您創建了selectionModel的非多選收集與

selection = new SelectionModel<CustomerSearchResult>(false, []); 

然後selection.selected.length實際上是1個，而不是預期的0項。沒有檢查，看到傳入的項目實際上是在模型中 - 這是一個非常非常愚蠢的類。所以它會盲目地將[0]作爲選定的項目。改爲使用null。源代碼清楚會出現這種情況：

if (_isMulti) { 
    initiallySelectedValues.forEach(value => this._markSelected(value)); 
    } else { 
    this._markSelected(initiallySelectedValues[0]); 
    }