如何将红色字体应用于动态数据的特定列？

Question

我在开发 angular 7 应用我需要将红色字体应用到数据内容 body 到 `columnname='onlineurl'.

但我不知道该怎么做？

我动态显示数据意味着没有固定的列或下面的数据和代码工作没有任何问题。

我主要需要的是如果columnname='onlineurl'将字体颜色设为内容body数据红色。

我的代码如下 ts 上的数据源如下：

this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {  

       this.reportdetailslist = data;  

       this.headerCols = Object.keys(data[0]);  

       data.forEach((item) =>{  
         let values = Object.keys(item).map((key)=> item[key])

         this.contentBody.push(values);  


  });  


     });

要在没有数据的情况下获得 header，我会按照以下步骤操作：

<thead style="width: max-content">    
         <tr>    
           <th  *ngFor="let coln of headerCols">    

               {{coln}}    

           </th> 
 </tr>    


         </tr>   
</thead>

无需 header 即可获取内容数据

<tr *ngFor="let rep of contentBody">    

                <td *ngFor="let r1 of rep"><span>{{r1}}</span></td>    

                <td
</tr> 
Result Returned 
ReportId   onlineurl          reportdate
1222       localhost:5000/    12-12-2018
1255       localhost:7000/    12-01-2019
1230       localhost:9000/    12-12-2020

Answer 1

您可以尝试使用 ngClass 有条件地添加 class，如下所示：

<td *ngFor="let r1 of rep">
    <span [ngClass]="{'text-red': r1.columnname=='onlineurl'}">{{r1}}</span>
</td>

然后使用CSS上色：

.text-red{
    color:red;
}

如何将红色字体应用于动态数据的特定列？

How to apply red color font to specific column for dynamic data?

javascript

typescript

angular-material

angular7

angular-components