如何在 Angular-Material 中对齐 mat-cell 中的文本

Question

在这里，我使用 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。因为我的单元格高度不同，当然因为下一列中显示的价格似乎是类别的价格。对于相同的 identifier, category，我希望 price 显示在第一行的底部。请参考working example.

一切看起来都很完美，但有趣的是我无法对齐底部 mat-cell 内的文本，因为我的单元格高度各不相同。我只想在单元格高度大于 50px

时对齐文本

Answer 1

这是一个可能的解决方案，使用 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)。

如何在 Angular-Material 中对齐 mat-cell 中的文本

How to align text in mat-cell in Angular-Material

materialize

typescript

material-design

angular-material