实施芯片

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; }

附：如果你给我一个工作实例（这里或通过stackblitz.com等），那么我可以帮助你实现所需的CSS外观。