在表格组件的mat-cell（td）中调用两个不同的变量

Question

我正在使用基本的table组件。在第二列（即预订）中，我想在同一列中显示2个变量，一个是number(ex 21)类型，另一个是string(ex participants)。 像这样：

因为第二个变量(i,e participants)我将其用作hyperlink。

我尝试过但最终却是这样：

意味着我也在第3列中显示变量(i, pariticipents)，但是我只想在第2n列中显示变量（i，当量），并在第3列中显示其他一些数据（ i，e Staff）就像在1st image中一样。

Answer 1

显示列列表出现问题。您可以删除要与其他串联的额外列。

我更新了stackblitz：https://stackblitz.com/edit/angular-g23zsu

displayedColumns: string[] = ['position', 'name', 'symbol'];

注释掉多余的列代码并追加到任何列

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

<!-- Weight Column -->
<!-- <ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Weight </th>
  <td mat-cell *matCellDef="let element">  </td>
</ng-container> -->