角度材料表单元格格式

Question

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

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

我的代码如下：

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

Answer 1

如果你想设置单元格的样式，mat-table你可以使用::ng-deepCSS 选择器来定位其中的每个元素，如下所示：

::ng-deep th.mat-header-cell{
    width: 140px;
    min-width: 140px;
}

您还可以[ngClass]根据如下条件将类应用于单元格：

 <ng-container matColumnDef="outcome">
  <th mat-header-cell *matHeaderCellDef mat-sort-header class="border"> Outcome </th>
  <td mat-cell *matCellDef="let element" class="font-weight-normal text-center text-capitalize"
  [ngClass]="[element.outcome == '' ? 'not-provided' : 'not-provided',
            element.outcome == 'stopped' ? 'provided-stoped' : 'not-provided']">{{element.outcome == '' ? "not provided" : "provided"}}</span> </td>
</ng-container>

你只需在 CSS 文件中定义类

Answer 2

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

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

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

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