Реализация чипов

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

PS, если вы дадите мне рабочий пример (здесь или через stackblitz.com и т. Д..) тогда я могу помочь вам добиться желаемого вида CSS.