实施芯片

Question

我如何在表的列中实现筹码，有人可以帮忙吗？我需要将{{truck.type}}类型的结果显示为桌上的筹码，但目前其显示为常规单词

  <ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="type">Type</th>
    <mat-chip-list><mat-chip><td mat-cell *matCellDef="let truck" class="pr-24">{{truck.type}}</td></mat-chip></mat-chip-list>
  </ng-container>

Answer 1

您的HTML表格似乎没有正确的结构；表格通常具有以下结构：

<table>
  <thead>
    <tr>
      <th>Column Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

但是，对于您而言，要使整个结构适应这种结构有些困难。因此，您可能想重建模板，但是还需要CSS的一些帮助：

<ng-container matColumnDef="type">
  <mat-chip-list class="table">
    <div class="row">
     <div class="cell" mat-header-cell *matHeaderCellDef mat-sort-header="type">Type</div>
    </div>
    <mat-chip class="row" *matCellDef="let truck of trucks" >
      <div mat-cell class="cell pr-24">{{truck.type}}</div>
    </mat-chip>
  </mat-chip-list>
</ng-container>

.table { display:table; }
.row { display:table-row; }
.cell{ display:table-cell; }

P.S。如果您给我一个工作示例（在此处或通过stackblitz.com等），那么我可以帮助您获得所需的CSS外观。