web-dev-qa-db-ja.com

Angular 4材料テーブルは行を強調表示します

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

angularangular-material2
42
Taison Morris

新しいマテリアルバージョンの更新（md-> mat）：

html：

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

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

元の答え：

ngClassとselectedRowIndexなどのフラグを使用して、これを行うことができます。クリックされた行インデックスがselectedRowIndexに等しいときはいつでも、クラスが適用されます。

Plunkerデモ

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;
}
63
Nehal

テーブルの概要の例 ページでは、選択を処理するためのSelectionModelについて説明しています-偶然にも複数選択も処理します。

selectionは、コンポーネントで定義されたSelectionModelです。これに関する実際のドキュメントは見つかりませんでしたが、 実装 は非常に簡単です。

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がこのような一般的なケースで改善され、すべてが開発者に委ねられるだけではないことを望んでいます。キーボードイベントなどのようなものは、選択モデルに関して自動的に処理されるといいでしょう。

27
Simon_Weaver

テーブルデータにid列のような一意の識別子はありませんでしたが、これはうまくいきました（マテリアル6）：

HTML

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

tSに変数を追加

selectedRow;

（S）CSS

.selected {
  background-color: red;
}

行を選択するときにスタイルを設定するだけでなく、もっと多くのことをしたい場合は、(click)="selectedRow = row"を(click)="selectRow(row)"に置き換えて、この関数をtsに追加します。

selectRow(row) {
    this.selectedRow = row;
    // more stuff to do...
}
9
Zuzze

それで、私もこの問題に遭遇しました。 「md-」の代わりに新しい「mat-」を使用していますが、ほぼ同じになると思います...

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

私はどこにもそれを見つけませんでした、私はそれを試しただけでうまくいきましたので、私はそれが正しいことを願っています。大きなことは、「let entry」を他のmatRowDefの最後にタグ付けすることでした。すみません、私はパーティーにとても遅れています。うまくいけば、これは誰かに良いことをします。

3
Nick Landkamer

素材の場合」：「^ 7.0.3」、

単一引用符なしでHTMLのCSS名を使用して、行を強調表示します

 .mat-row.highlighted {
  background: lightblue;
  }


<tr mat-row *matRowDef="let row; columns: displayedColumn;" 
[ngClass]="{highlighted: selectedRowIndex == row.id}"  (click)="highlight(row)" > 
</tr>


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