web-dev-qa-db-ja.com

Angular Material Table-背景色を動的に行に適用します（Angular 2+））

こんにちはAngularアプリケーションがあり、スケジューラエンジンで実行されているプロセスのステータスをリアルタイムで表示します。これらのプロセスを表示する次の表があります。 Table

次のように、ステータスに応じて行の背景色を動的に変更します。

S（開始）-白;

W（ワーキング）【ブルー】

E（エラー）-赤;

F（終了）-緑;

Html

<table mat-table [dataSource]="this.dataSource" multiTemplateDataRows class="mat-elevation-z8" >

  <!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="log_message">
        <div class="example-element-description">
          <p *ngIf="this.log_message">Log Message:</p>
          <p *ngIf="!this.log_message">N/A</p>
          <pre *ngIf="this.log_message"> {{ this.log_message }} </pre>
        </div>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="UPD_DATE">
    <th mat-header-cell *matHeaderCellDef> UPD_DATE </th>
    <td mat-cell *matCellDef="let data"> {{data.LAST_UPD_DATETIME}} </td>
  </ng-container>

  <ng-container matColumnDef="S">
    <th mat-header-cell *matHeaderCellDef> S </th>
    <td mat-cell *matCellDef="let data"> {{data.STATUS}} </td>
  </ng-container>

  <ng-container matColumnDef="PROC">
    <th mat-header-cell *matHeaderCellDef> PROC </th>
    <td mat-cell *matCellDef="let data"> {{data.PROC_ID}} </td>
  </ng-container>

  <ng-container matColumnDef="AGENT">
    <th mat-header-cell *matHeaderCellDef> AGENT </th>
    <td mat-cell *matCellDef="let data"> {{data.AGENT_ID}} </td>
  </ng-container>

  <ng-container matColumnDef="SUBMIT_DATE">
    <th mat-header-cell *matHeaderCellDef> SUBMIT_DATE </th>
    <td mat-cell *matCellDef="let data"> {{data.SUBMIT_DATE}} </td>
  </ng-container>

  <ng-container matColumnDef="END_DATE">
    <th mat-header-cell *matHeaderCellDef> END_DATE </th>
    <td mat-cell *matCellDef="let data"> {{data.END_DATE}} </td>
  </ng-container>

  <ng-container matColumnDef="START_DATE">
    <th mat-header-cell *matHeaderCellDef> START_DATE </th>
    <td mat-cell *matCellDef="let data"> {{data.START_DATE}} </td>
  </ng-container>

  <ng-container matColumnDef="USER_SUBMIT">
    <th mat-header-cell *matHeaderCellDef> USER_SUBMIT </th>
    <td mat-cell *matCellDef="let data"> {{data.USER_SUBMIT}} </td>
  </ng-container>

  <ng-container matColumnDef="THREAD_NUM">
    <th mat-header-cell *matHeaderCellDef> THREAD_NUM </th>
    <td mat-cell *matCellDef="let data"> {{data.THREAD_NUM}} </td>
  </ng-container>

  <ng-container matColumnDef="INSTANCE_ID">
    <th mat-header-cell *matHeaderCellDef> INSTANCE_ID </th>
    <td mat-cell *matCellDef="let data"> {{data.INSTANCE_ID}} </td>
  </ng-container>

  <ng-container matColumnDef="START">
    <th mat-header-cell *matHeaderCellDef> START </th>
    <td mat-cell *matCellDef="let row"><button class="btn btn-success" (click)="onStart(row)" [disabled]="this.started">Start</button></td>
  </ng-container>

  <ng-container matColumnDef="STOP">
    <th mat-header-cell *matHeaderCellDef> STOP </th>
    <td mat-cell *matCellDef="let row"><button class="btn btn-danger" (click)="onStop()">Stop</button></td>
  </ng-container>

  <ng-container matColumnDef="LOG">
    <th mat-header-cell *matHeaderCellDef> LOG </th>
    <td mat-cell *matCellDef="let row"><button class="btn btn-info" (click)="onLog()">Log</button></td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
    [class.example-expanded-row]="expandedElement === element" (click)="log_message = onElementExpand(element); expandedElement = element;"></tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

<mat-toolbar>
    <mat-toolbar-row>
        <button class="btn btn-primary" (click)="getIpeProcessInstances()" [disabled]="false">{{ 'button.Refresh' | translate }}</button>
      <span class="example-spacer"></span>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </mat-toolbar-row>
</mat-toolbar>

[〜＃〜] css [〜＃〜]

table {
  width: 100%;
}

tr.example-detail-row {
  height: 0;
}


tr.example-element-row:not(.example-expanded-row):hover {
  background: #f5f5f5;
}

tr.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row td {
  border-bottom-width: 0;
}

.example-element-detail {
  overflow: hidden;
  display: flex;
}

.example-element-diagram {
  min-width: 80px;
  border: 2px solid black;
  padding: 8px;
  font-weight: lighter;
  margin: 8px 0;
  height: 104px;
}

.example-element-symbol {
  font-weight: bold;
  font-size: 40px;
  line-height: normal;
}

.example-element-description {
  padding: 16px;
}

.example-element-description-attribution {
  opacity: 0.5;
}

.mat-elevation-z8 {
  width: 100%;
}

.mat-row:hover {
  background-color: whitesmoke;
}

.example-icon {
  padding: 0 14px;
}

.example-spacer {
  flex: 1 1 auto;
}

.mat-paginator
{
  background-color: whitesmoke;
}

では、提出されたステータスに基づいて、行の色を動的に変更するにはどうすればよいですか？ありがとうございました！

htmlcssangularangular-material
4
Kiril1512

[ngClass]を使用してこれを実現することもできます。

<td [ngClass]="{
  'is-white': data.STATUS === 'S',
  'is-blue': data.STATUS === 'W',
  'is-red': data.STATUS === 'E',
  'is-green': data.STATUS === 'F'
}">...</td>

そして、あなたのCSSで：

td.is-white {
    background: ...;
}

エボラ！異なるソリューションでこれを実現できることを理解するのに役立つことを願っています。

[〜＃〜]編集[〜＃〜]

使いやすいように、2番目の[ngClass]を使用してください<tr>

<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  [ngClass]="{
  'is-white': element.STATUS === 'S',
  'is-blue': element.STATUS === 'W',
  'is-red': element.STATUS === 'E',
  'is-green': element.STATUS === 'F'
}" (click)="log_message = onElementExpand(element); expandedElement = element;"></tr>
5
B.Benjo

[ngStyle] on

<td mat-cell *matCellDef="let data" [ngStyle]="{'background-color': data.STATUS == 's' ? 'white': data.STATUS == 'w' ? 'blue' : data.STATUS == 'e' ? 'Red' : data.STATUS == 'f' ? 'green' : ''}"> {{data.STATUS}} </td>

この場合、tdごとに[ngStyle]を繰り返す必要があるため、私の答えは完全ではありません。

4
Farhat Zaman

ステータスの値を含む属性を追加し、その属性のCSSを記述します

例：HTML

<tr [attr.row_status]="data.STATUS" /></tr>

したがって、ビューがレンダリングされると、HTMLは次のようになります。

<tr row_status="S"></tr>

次に、セレクターにCSSを追加します。

[row_status="S"] {
   background: #fff
}

それでも問題が解決しない場合はお知らせください。そしておそらくスニペットを通して次回コードを共有します。

乾杯:)

1
Mohit Mishra