Как отобразить несколько значений в одном столбце?

Question

Мне нужно отобразить несколько записей в одном столбце. Но после того, как я добавил это:

{ value: ["full_name", "type", "technology"], displayName: 'Goal' },

Эта ошибка начала возникать:

ОШИБКА TypeError: name.replace не является функцией

Как это можно исправить?

const COLS = [
  { value: "short_name", displayName: 'Short Name' },
  { value: "well", displayName: 'Well' },
  { value: "project_depth", displayName: 'Project Depth' },
  { value: "layer", displayName: 'Layer' },
  { value: ["full_name", "type", "technology"], displayName: 'Goal' },
  { value: "start", displayName: 'Date Start' },
  { value: "end", displayName: 'Date End' }
];

  allCols = COLS;
  displayedColumns: any[];
  public dataSource;

  ngOnInit() {
    this.displayedColumns = this.allCols.map(col => col.value);
  }

html:

<table mat-table class="tb" [dataSource]="dataSource" matSort matSortDisableClear
matSortActive="well" matSortDirection="asc">
<ng-container [matColumnDef]="column.value" *ngFor="let column of allCols;">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="load()">
        {{column.displayName}}
    </th>
    <td mat-cell *matCellDef="let row">
        {{row[column.value]}}
    </td>
</ng-container>
<ng-container matColumnDef="button">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
        <button mat-icon-button color="primary" matTooltip="Edit" (click)="edit(row)">
            <mat-icon>edit</mat-icon>
        </button>
        <button mat-icon-button color="warn" matTooltip="Delete" (click)="delete(row)">
            <mat-icon>delete_outline</mat-icon>
        </button>
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns.concat(['button'])"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns.concat(['button']);"></tr>
</table>

Answer 1

Datatable обычно ожидает string / number как значение, следовательно

Обходной путь для этого может быть:

let goalValue = '';
value = ["full_name", "type", "technology"];

value.forEach((v: string) => {
  goalValue += v;
})

const COLS = [
  ...
  { value: goalValue, displayName: 'Goal' },
  ...
];