时间戳

首页 > 解决方案 > 如何在表格单元格中添加多个值？

angular - 如何在表格单元格中添加多个值？

问题描述

我目前有一个材料表如下：

<table mat-table [dataSource]="blogPosts">

  <!-- Title Column -->
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef>Title</th>
    <td mat-cell *matCellDef="let element">{{ element.title }}</td>
  </ng-container>

  <!-- Author Column -->
  <ng-container matColumnDef="author">
    <th mat-header-cell *matHeaderCellDef>Author</th>
    <td mat-cell *matCellDef="let element">{{ element.author }}</td>
  </ng-container>

  <!-- Country Column -->
  <ng-container matColumnDef="country">
    <th mat-header-cell *matHeaderCellDef>Country</th>
    <td mat-cell *matCellDef="let element">{{ element.country }}</td>
  </ng-container>

  <!-- Link Column -->
  <ng-container matColumnDef="link">
    <th mat-header-cell *matHeaderCellDef>Links</th>
    <td mat-cell *matCellDef="let element"><a href="{{element.link}}"><i class="material-icons">link</i></a></td>
  </ng-container>



  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

这仅在 Links 标题下显示一个链接，但我需要做什么才能显示多个值说：

  1. 使用 *ngFor 显示链接列表
  2. 显示类似的内容（不在 *ngFor 内）：

  <ng-container matColumnDef="link">
    <th mat-header-cell *matHeaderCellDef>Links</th>
    <td mat-cell *matCellDef="let element"><a href="{{element.linkToWiki}}"><i class="material-icons">link</i></a></td>
    <td mat-cell *matCellDef="let element"><a href="{{element.linkToAmazon}}"><i class="material-icons">link</i></a></td>
  </ng-container>

标签： angularangular-material

解决方案

<ng-container matColumnDef="link">
  <th mat-header-cell *matHeaderCellDef>Links</th>
    <td mat-cell *matCellDef="let element">
        <a href="{{element.linkToWiki}}"><i class="material-icons">Wiki link</i></a>
        <a href="{{element.linkToAmazon}}"><i class="material-icons">Amazon link</i></a>
    </td>
</ng-container>

你不应该直接嵌套<td>在里面，它们应该立即在里面<tr>。如果您希望每个链接都拥有它们，<td>那么您应该检查colspan

推荐阅读