Question

我目前的物料表如下：

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

这仅在“链接”标题下显示一个链接，但是要显示多个值我需要做什么：

使用* ngFor
显示类似内容（不在* 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>

Answer 1

<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

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

1 个答案: