Angular Material Table - 将动态背景颜色应用于一行（Angular 2+）

Posted 2023-03-05

【中文标题】Angular Material Table - 将动态背景颜色应用于一行（Angular 2+）

【英文标题】：Angular Material Table - Apply dynamically background color to a row (Angular 2+)

【发布时间】：2019-04-29 00:35:29

【问题描述】：

您好，我有一个 Angular 应用程序，它可以实时显示调度程序引擎中运行的进程的状态。 我有下表来显示这些过程：

我想要的是根据状态动态更改行背景颜色，如下所示：

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;

那么根据状态字段，我如何动态更改行颜色？ 谢谢！

【参考方案1】：

您也可以使用[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: ...;

等等！希望它有助于理解您可以通过不同的解决方案实现这一目标。

编辑

为了您的使用，请在第二个<tr> 中使用[ngClass]

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

【讨论】：

但在我的情况下，我需要将背景设置为整行，而不仅仅是状态字段...

您也可以对 元素使用相同的逻辑 @Praetorian1995 是的，我的错。供您个人使用，只需将 ngClass 复制到您的第二个 ;) @BenThie 它不适用于tr。可能是因为html看不到this.status？ @Praetorian1995 在我的回答中出现这样的错误我很糟糕，希望现在很清楚;)

【参考方案2】：

使用状态值添加属性，然后为该属性编写 CSS

例如：HTML

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

因此，当视图被渲染时，您的 HTML 将如下所示：

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

现在为选择器添加 CSS：

[row_status="S"] 
   background: #fff

如果您仍然遇到此问题，请告诉我。并且可能下次通过sn-p分享代码。

干杯:)

【参考方案3】：

您可以通过使用[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]

【讨论】：

你应该避免在编码时使用 inline-css。这不是一个好习惯

是的，同意，您可以使用[ngClass] 代替[ngStyle]。