Angular Material Table 单元格格式
Angular Material Table Cell Formatting
我正在使用 angular material table 显示数据并动态绑定 table header 和 table 数据。
有什么方法可以动态格式化特定列的单元格内容吗?
例如,我如何格式化金额列的值右对齐?
我的代码如下:
<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"
}
]
如果您想为 mat-table
上的单元格设置样式,您可以使用 ::ng-deep
CSS 选择器来定位其中的每个元素,如下所示:
::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 文件中定义 类
在我们工作的项目中,我们使用了很多 mat-tables。我从来没有幸运地通过 <ng-container>
上的 ngFor-ing 制作任何类型的真正定制的 table。我们的几乎每个 table 都是通过为每一列单独定义每个 <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>
这样做的好处是您可以用您想要的样式定义每一列,以及添加更多 属性 特定的选项,例如管道 and/or elvis 运算符。
最佳解决方案是在 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;
}
您可以通过向 <td>
元素添加类似 [align]="expression ? 'right' : ''"
的内容来动态地将列对齐方式设置为右对齐,因此对于您的代码而言,这将类似于:
<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>
我想要一个类似的东西,但在特定列上更复杂的显示样式。我正在使用循环来显示所有需要的列。
也许这段代码有帮助
我在 mat-header-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>
我正在使用 angular material table 显示数据并动态绑定 table header 和 table 数据。 有什么方法可以动态格式化特定列的单元格内容吗?
例如,我如何格式化金额列的值右对齐?
我的代码如下:
<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"
}
]
如果您想为 mat-table
上的单元格设置样式,您可以使用 ::ng-deep
CSS 选择器来定位其中的每个元素,如下所示:
::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 文件中定义 类
在我们工作的项目中,我们使用了很多 mat-tables。我从来没有幸运地通过 <ng-container>
上的 ngFor-ing 制作任何类型的真正定制的 table。我们的几乎每个 table 都是通过为每一列单独定义每个 <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>
这样做的好处是您可以用您想要的样式定义每一列,以及添加更多 属性 特定的选项,例如管道 and/or elvis 运算符。
最佳解决方案是在 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;
}
您可以通过向 <td>
元素添加类似 [align]="expression ? 'right' : ''"
的内容来动态地将列对齐方式设置为右对齐,因此对于您的代码而言,这将类似于:
<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>
我想要一个类似的东西,但在特定列上更复杂的显示样式。我正在使用循环来显示所有需要的列。
也许这段代码有帮助
我在 mat-header-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>