javascript 角度材料表单元格格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53084892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Material Table Cell Formatting
提问by Tom
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"
}
]
回答by Akhi Akl
Best solution is to use selector in css as below where 'column_name' is the name you provide in 'matColumnDef'
最佳解决方案是在 css 中使用选择器，如下所示，其中“column_name”是您在“matColumnDef”中提供的名称
.mat-column-'column_name'{
//your custom css
text-align: right;
}
if your column 'matColumnDef' is 'amount'
如果您的列 'matColumnDef' 是 'amount'
.mat-column-amount{
//your custom css
text-align: right;
}
回答by IvanS95
If you want to style cells on a mat-tableyou can target every element inside by using the ::ng-deepCSS selector like this:
如果你想在一个单元格上设置样式，mat-table你可以使用::ng-deepCSS 选择器来定位里面的每个元素，如下所示：
::ng-deep th.mat-header-cell{
width: 140px;
min-width: 140px;
}
You can also use [ngClass]to apply classes to a cell based on a condition like this:
您还可以[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>
and you just define the classes in your CSS file
并且您只需在 CSS 文件中定义类
回答by Jesse
At our project at work we use a lot of mat-tables. I've never had luck making any kind of truly customized table by ngFor-ing over the <ng-container>. Almost every one of our tables is built by individually defining each <ng-container>for each column.
在我们的工作项目中，我们使用了很多 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>
The advantage of this is you can define each column with the styles you want, as well as add more property-specific options such as pipes and/or the elvis operator.
这样做的好处是您可以使用您想要的样式定义每一列，以及添加更多特定于属性的选项，例如管道和/或 elvis 运算符。
回答by alisonmsmith
You can dynamically set the column alignment to right by adding something like, [align]="expression ? 'right' : ''"to the <td>element, so for your code this would look like:
您可以通过向元素添加类似[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>
