CODEWITHSUNDEEP
angularangular-material
user12916796
user12916796

Reputation: 191

How to display multiple values ​in one column?

I need to display multiple entries in one column. But after I added this:

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

This error started to occur:

ERROR TypeError: name.replace is not a function

How can this be fixed?

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>

Upvotes: 0

Views: 2118

Answers (1)

Sumit Vekariya
Sumit Vekariya

Reputation: 488

Datatable generally expects string / number as value, Hence

Workaround for this can be:

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

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

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

Upvotes: 1

Related Questions