根据Angular中的日期值更改动态创建的表中的行颜色答案

【问题标题】：Change row color in a dynamically created table based on date value in Angular根据Angular中的日期值更改动态创建的表中的行颜色
【发布时间】：2019-12-30 04:55:19
【问题描述】：

我在运行查询时动态创建表。所有列都是动态创建的。我想根据其中包含日期值的列值为行着色。

请查看下表以获得更好的理解

在此表中，我想根据最后一列“aggiornato al”设置行颜色。以下是规则：

如果 (sysdate - aggiornato al) 浅绿色
如果 (sysdate - aggiornato al) > 3 小时 AND 浅橙色
如果 (sysdate - aggiornato al) >= 48 小时 -> 颜色为浅红色

HTML：

<table class="table stripe executedQueryResult no-padding" id="queryTable" #queryTable>
    <thead class="text-center no-padding" style="background: #0042be;">
         <tr style="font-size:12px;color:white">
             <th *ngFor="let key of debugQueryData">{{key}}</th>
         </tr>
    </thead>
    <tbody class="text-center">
         <tr *ngFor="let value of debugResult | filter : filters.searchUsersText">
            <td *ngFor="let key of debugQueryData; index as i"><div [innerHTML]="value[key]"></div> 
            </td>
         </tr>
    </tbody>
</table>

TS：

debug() {

    this.hideData=0;
    this.valueCount = 0;
    this.loadingResult = true;
    this.clearData();

    this.executeQueryData.QueryText = this.addEditQueryForm.value.QueryText;
    this.executeQueryData.Parameters = this.addEditQueryForm.value.Parameters;
    this._freeFormReport.ExecuteReportQuery(this.executeQueryData).subscribe(data => {
      this.debugResult = data;
      if(this.debugResult.length==0){
        this.debugResult = [{Error: 'No data found'}]
        this.debugQueryData = Object.keys(this.debugResult[0]);
      }else{
        ////////////// Setting Key ///////////////

        this.isDebug = 1;
        if(data[0]=='O'){
          this.toastr.error('Errore esecuzione Free Form Report. ' +this.debugResult, 'Error');
          this.debugResult = [{Error: 'No data found'}]
          this.debugQueryData = Object.keys(this.debugResult[0]);
          this.hideData=1;
        }else{
          if(this.debugResult.length > 10){
            this.debugResult = this.debugResult.splice(0,10);
          }
          ////////////// Setting Key ///////////////
          this.hideExport = false;
          this.debugQueryData = Object.keys(data[0]);

          console.log(this.debugQueryData[0]);
          $('#btnExporta').show();
          setTimeout(() => {
          this.dtTrigger3.next();
           this.rerender();
            this.loadingResult = false;
            this.hideExport = false;
          }, 2000);
        }
      }
    },error => {
      this.toastr.error('Errore in query execution', 'Error');
    });
    this.hideParametersModal();
  }

请为此提出一个可能的解决方案，因为我无法开发一个。

【问题讨论】：

如果您希望别人帮助您，您可能需要考虑做翻译非英语部分的工作。

标签： angular dynamic html-table

【解决方案1】：

你可以用 ngClass 来做 HTML

<table class="table stripe executedQueryResult no-padding" id="queryTable" #queryTable>
    <thead class="text-center no-padding" style="background: #0042be;">
         <tr style="font-size:12px;color:white">
             <th *ngFor="let key of debugQueryData">{{key}}</th>
         </tr>
    </thead>
    <tbody class="text-center">
         <tr *ngFor="let value of debugResult | filter : filters.searchUsersText">
            <td [ngClass]={'red': (value.sysdate - valueaggiornatoAl) >=48, 'green': <green condition>}  *ngFor="let key of debugQueryData; index as i"><div [innerHTML]="value[key]"></div> 
            </td>
         </tr>
    </tbody>
</table>

CSS

.red {
     background: red;
}
.green {
     background: green;
}

您可以在这个答案中看到更多关于 ngClass 的信息 Angular: conditional class with *ngClass

【讨论】：