Чтобы вызвать две разные переменные в mat-cell (td) в компоненте таблицы

Question

Я использую базовый table компонент.Здесь во 2-м столбце (i, e Booking ) я хочу отобразить 2 переменные в одном столбце, одна имеет тип number(ex 21), а другая - string(ex participants).Примерно так:

Поскольку 2-ю переменную (i,e participants) я использую как hyperlink.

Я пытался, нозакончилось так:

Означает, что я отображаю переменную (i, pariticipents) в 3-м столбце, но Я хочу отобразить переменную (i, участники) только в столбце 2n и некоторые другие данные в 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> -->