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

问题描述

我使用有角度的材料表来显示数据并动态绑定表头和表数据.有没有办法动态格式化特定列的单元格内容?.

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

我的代码如下:

<ng-container [matColumnDef]="col" *ngFor="let col of shownColumns; let i = index"><th *matHeaderCellDef>{{displayedFields[i].name}}</th><td mat-cell *matCellDef="let element">{{ element[col] }} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>

我的数据就像

<预><代码>[{"REFERENCE_ID": "ENT201810637610","PRODUCT_TYPE": "IMPS","CUSTOMER_REFERENCE": "CUS12123","BENEFICIARY_NAME": "arun","DEBIT_ACCOUNT": "100002258062",金额":342234，"STAGE_CODE": "完成","STATUS_CODE": "新"},{"REFERENCE_ID": "ENT201808820426","PRODUCT_TYPE": "IMPS","CUSTOMER_REFERENCE": "12121","BENEFICIARY_NAME": "阿伦","DEBIT_ACCOUNT": "32423424",金额":700，"STAGE_CODE": "INITIATION","STATUS_CODE": "新"}]

解决方案

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

.mat-column-'column_name'{//你的自定义css文本对齐:右；}

如果您的列 'matColumnDef' 是 'amount'

.mat-column-amount{//你的自定义css文本对齐:右；}

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?

My code is as below :

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

And my data is like

[
  {
    "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"
  }
]

解决方案

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

if your column 'matColumnDef' is 'amount'

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

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