typescript - 如何在 Angular-Material 中对齐 mat-cell 中的文本
问题描述
在这里,我使用 Angular-Material 来显示我拥有平面 json 对象的产品列表。我有如下的json:
data: [
{
"identifier": "data",
"categoryId": "1",
"category": "Baked goods",
"product": "Aunt Hattie's",
"price": "375"
},
{
"identifier": "data",
"categoryId": "1",
"category": "Baked goods",
"product": "Back to Nature",
"price": "343"
},
{
"identifier": "data",
"categoryId": "2",
"category": "Cakes",
"product": "Mars Muffin (McVitie's)",
"price": "465"
},
{
"identifier": "data",
"categoryId": "2",
"category": "Cakes",
"product": "McVitie's",
"price": "251"
},
{
"identifier": "data",
"categoryId": "2",
"category": "Cakes",
"product": "Mr Kipling",
"price": "260"
},
{
"identifier": "data",
"categoryId": "2",
"category": "Cakes",
"product": "Mr Kipling Frosty Fancies",
"price": "210"
},
{
"identifier": "data",
"categoryId": "3",
"category": "Dairy products",
"product": "Amul",
"price": "474"
},
{
"identifier": "data",
"categoryId": "3",
"category": "Dairy products",
"product": "Borden",
"price": "184"
},
{
"identifier": "data",
"categoryId": "3",
"category": "Dairy products",
"product": "Broughton Foods Company",
"price": "43"
},
]
编辑 我正在显示这样的数据:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Product Column -->
<ng-container matColumnDef="Product">
<th mat-header-cell *matHeaderCellDef> Product </th>
<td mat-cell *matCellDef="let element">
<div *ngIf="!HideShowCategory(element)">
{{element.identifier}} <br/>
{{element.categoryId}} <br/>
{{element.category}} <br/>
</div>
{{element.product}}
</td>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="Price">
<th mat-header-cell *matHeaderCellDef> Price </th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
我在第一行identifier, category and product
的第一列和price
第二列中显示。我只显示相同的行。因为我的单元格高度不同,当然因为下一列中显示的价格似乎是类别的价格。我希望在第一行的底部显示相同的。请参阅工作示例。identifier, category
product
price
identifier, category
一切看起来都很完美,但有趣的是我无法对齐mat-cell
底部内部的文本,因为我的单元格高度彼此不同。我只想在单元格高度大于 50px 时对齐文本
解决方案
这是使用 CSS 的可能解决方案 - stackblitz
标记
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Product Column -->
<ng-container matColumnDef="Product">
<th mat-header-cell *matHeaderCellDef> Product </th>
<td mat-cell *matCellDef="let element">
<div *ngIf="!HideShowCategory(element)">
{{element.identifier}} <br/>
{{element.categoryId}} <br/>
{{element.category}} <br/>
</div>
{{element.product}}
</td>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="Price">
<th mat-header-cell *matHeaderCellDef> Price </th>
<td mat-cell *matCellDef="let element" class="price-container">
<span [ngClass]="{'price-bottom': !HideShowCategory(element)}">{{element.price}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
CSS
table {
width: 100%;
}
.price-container {
position: relative;
}
.price-bottom {
position: absolute;
bottom: 0;
}
这个想法是使价格位置依赖于HideShowCategory(element)
。
推荐阅读
- python-3.x - 在没有互联网的情况下安装 tensorflow
- boxplot - 在表示 R 中的置信区间的两点之间创建图
- amazon-web-services - 如何使用 hdockerpy 和 aws ecr repo 修复没有基本身份验证凭据错误?
- php - httpd.conf 中可能有语法错误
- python - 在 sagemaker 上的 tensorflow 上接收错误作为输入必须是一个向量,得到形状:[1,2]
- excel - VBA 在 Microsoft Word 中工作正常,但在 Libre Office 作家中无法工作如何修复
- c++ - 运行时动态函数解析
- c# - 无法从字符串转换为 Microsft.AspNetCore.Http.IFormFile
- python - 当我在 VS 代码中运行 python notebook 时,是否有任何解决 URL 错误的方法?
- javascript - 从 Google Trends API 获取数据但收到意外的令牌错误