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。由于我的单元格高度不同，当然，因为下一列显示的价格似乎是类别价格。我希望将price显示在第一行的底部。请参阅working example。

一切似乎都很完美，但是有趣的是，由于单元格高度互不相同，我无法在底部的identifier, category内对齐文本。我只想在单元格高度大于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中对齐文本

1 个答案: