角4材料テーブルが行を強調表示

Question

私はmd-tableの全行を強調表示する良い方法を探しています。
ディレクティブを実行する必要がありますか？
誰もがこれを手伝うことができますか？

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

私はどこにも見つかりませんでした...私は新しい「のマット」の代わりの「MD-」を使用していますが、私はそれがほぼ同じになります推測している、私はそれを試してみましたそれがうまくいったので、私はそれが正しいと願っています。大きなことは、他のmatRowDefの内容の最後に「入力を許可」というタグを付けることでした。申し訳ありません、私はパーティーにとても遅れています。うまくいけば、これは誰か良いことです。

Answer 3

table overview examplesページでは、選択を処理するためにSelectionModelが説明されています。これは、偶然にも複数選択を処理します。私はこれが今後の改善に組み込まれることを前進させると思いますので、今すぐ使用することをお勧めします。

selectionは、コンポーネントで定義されているSelectionModelです。私はこれについての実際のドキュメントを見つけることができませんでしたが、implementationは非常に簡単です。

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

最初のパラメータは、そうtrueに設定された複数の項目を一度に選択することができるように、allowMultiSelectあります。 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がこのような一般的なケースで改善されることを望んでおり、すべてを開発者に任せているわけではありません。キーボードイベントなどのようなものは、選択モデルに関して自動的に処理されるのが良いでしょう。

---

ヒント：

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

と非マルチ選択収集のためのあなたのselectionModelのを作成した場合、その後selection.selected.lengthが実際に1としませ予想0アイテムになることに注意してください。渡されたアイテムが実際にモデルに入っていることを確認するチェックはありません。非常に愚かなクラスです。だから、それは盲目的に[0]を選択された項目として置く。代わりにnullを使用します。ソースコードは、この問題が発生した理由を明らかに：

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