Как я могу добавить более одного значения в ячейку таблицы?

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>

Это отображает только одну ссылку под заголовком Ссылки, но что мне нужно сделать, чтобы отобразить несколько значений, скажем:

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>

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