角材料表单元格格式 [英] Angular Material Table Cell Formatting

问题描述

我正在使用角度材质表来显示数据，并以动态方式绑定表标题和表数据. 有什么方法可以动态格式化特定列的单元格内容?

I'm using angular material table for displaying data and dyanmically binding the table header and table data. Is there any way to format particaular column's cell content dynamically?.

例如，我如何格式化金额列的值右对齐?

For example how can i format the value of amount column right aligned?

我的代码如下:

<table mat-table [dataSource]="dataSource" class="" style="width: 100%;">

      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index">
        <th *matHeaderCellDef> {{displayedFields[i].name}}</th>
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
      </ng-container> 

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

我的数据就像

[
  {
    "REFERENCE_ID": "ENT201810637610",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "CUS12123",
    "BENEFICIARY_NAME": "arun",
    "DEBIT_ACCOUNT": "100002258062",
    "AMOUNT": 342234,
    "STAGE_CODE": "FULLFILMENT",
    "STATUS_CODE": "NEW"
  },
  {
    "REFERENCE_ID": "ENT201808820426",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "12121",
    "BENEFICIARY_NAME": "Arun",
    "DEBIT_ACCOUNT": "32423424",
    "AMOUNT": 700,
    "STAGE_CODE": "INITIATION",
    "STATUS_CODE": "NEW"
  }
]

推荐答案

最佳解决方案是在CSS中使用选择器，如下所示，其中"column_name"是您在"matColumnDef"中提供的名称

Best solution is to use selector in css as below where 'column_name' is the name you provide in 'matColumnDef'

.mat-column-'column_name'{
   //your custom css 
   text-align: right;
 }

如果您的"matColumnDef"列为金额"

if your column 'matColumnDef' is 'amount'

.mat-column-amount{
   //your custom css 
   text-align: right;
 }

这篇关于角材料表单元格格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！