8

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

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

我的代码如下：

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

5 回答 5

8

最佳解决方案是在 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;
 }
于 2018-11-01T07:22:11.927 回答
5

如果您想在 a 上设置单元格样式，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 文件中定义类

于 2018-10-31T14:20:48.920 回答
4

在我们的工作项目中，我们使用了很多 mat-tables。我从来没有运气通过 ngFor-ing 在<ng-container>. 几乎我们的每一个表都是通过<ng-container>为每一列单独定义每个表来构建的。

<ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef> Employee Code </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.code }} </td>
</ng-container>

<ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let employee"> 
          {{ employee.status?.description }} 
    </td>
</ng-container>

<ng-container matColumnDef="salary">
    <th mat-header-cell *matHeaderCellDef> Salary </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.salary | currency}} </td>
</ng-container>

这样做的好处是您可以使用所需的样式定义每一列，以及添加更多特定于属性的选项，例如管道和/或 elvis 运算符。

于 2018-10-31T15:24:24.220 回答
0

您可以通过向元素添加类似的内容来动态地将列对齐设置为右对齐[align]="expression ? 'right' : ''"，<td>因此对于您的代码，这将如下所示：

<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" [align]="col === 'AMOUNT' ? 'right' : ''"> {{ element[col] }} </td>
      </ng-container> 

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
于 2019-02-20T21:13:08.747 回答
0

我想要一个类似的东西，但在特定列上更复杂的显示样式。我正在使用循环来显示所有需要的列。

也许这个代码片段有帮助

自定义样式的列

我在 mat-h​​eader-cell 和 mat-cell 中使用了一个简单的 ngIf 来控制它。

<table mat-table [dataSource]="dataSource" class="preview-table">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of dcolumns">

        <th mat-header-cell *matHeaderCellDef>
            <ng-container *ngIf="!(column === 'tagList')">
                {{column}}
            </ng-container>
            <ng-container *ngIf="column === 'tagList'">
                {{column}} h
            </ng-container>
        </th>
        <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="!(column === 'tagList')">
                {{element[column]}}
            </ng-container>
            <ng-container *ngIf="column === 'tagList'">
                {{element[column]}} h
            </ng-container>
        </td>

    </ng-container>

    <!-- other field as per syntax -->

</table>
于 2021-07-04T07:05:56.090 回答