javascript - Angular material2 dynamically generate columns - Stack Overflow

admin管理员组

文章数量:1390192

I am using angular material ng-table and wanto to generate columns dynamically. Following example contains html template. This is working example of "statically" defined table template. I want to replace all columnd definitions with something like code in ments.

<md-table #table [dataSource]="dataSource">
<ng-container cdkColumnDef="userId">
    <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row['userId']}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="progress">
    <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row['progress']}}% </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="userName">
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row['userName']}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="color">
    <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
    <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row['color']}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

<!-- <ng-container
  *ngFor='let column of tableOptions.columnDefs'
  cdkColumnDef='column.columnDef'>
  <md-header-cell *cdkHeaderCellDef> {{column.headName}} </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row[column.columnDef]}} </md-cell>
</ng-container> -->

columnDefs json looks like this:

columnDefs: [
    {
      columnDef: 'userId',
      headName: 'ID'
    },
    {
      columnDef: 'userName',
      headName: 'Name'
    },
    {
      columnDef: 'progress',
      headName: 'Progress'
    },
    {
      columnDef: 'color',
      headName: 'Color'
    }
  ]

Variable displayedColumns from header is as array ["userId", "userName", "progress", "color"] which generation is based on columnDefs json

When I try using *ngFor, I get this error:

    TableComponent.html:24 
ERROR Error: cdk-table: Could not find column with id "userId".
    at getTableUnknownColumnError (cdk.es5.js:1780)
    at cdk.es5.js:2111
    at Array.map (<anonymous>)
    at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._getHeaderCellTemplatesForRow (cdk.es5.js:2108)
    at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._renderHeaderRow (cdk.es5.js:2016)
    at SafeSubscriber._next (cdk.es5.js:1952)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)

Is it possible to generate columns dynamically?

EDIT:

Plunker example

I am using angular material ng-table and wanto to generate columns dynamically. Following example contains html template. This is working example of "statically" defined table template. I want to replace all columnd definitions with something like code in ments.

<md-table #table [dataSource]="dataSource">
<ng-container cdkColumnDef="userId">
    <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row['userId']}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="progress">
    <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row['progress']}}% </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="userName">
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row['userName']}} </md-cell>
  </ng-container>

  <ng-container cdkColumnDef="color">
    <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
    <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row['color']}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

<!-- <ng-container
  *ngFor='let column of tableOptions.columnDefs'
  cdkColumnDef='column.columnDef'>
  <md-header-cell *cdkHeaderCellDef> {{column.headName}} </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row[column.columnDef]}} </md-cell>
</ng-container> -->

columnDefs json looks like this:

columnDefs: [
    {
      columnDef: 'userId',
      headName: 'ID'
    },
    {
      columnDef: 'userName',
      headName: 'Name'
    },
    {
      columnDef: 'progress',
      headName: 'Progress'
    },
    {
      columnDef: 'color',
      headName: 'Color'
    }
  ]

Variable displayedColumns from header is as array ["userId", "userName", "progress", "color"] which generation is based on columnDefs json

When I try using *ngFor, I get this error:

    TableComponent.html:24 
ERROR Error: cdk-table: Could not find column with id "userId".
    at getTableUnknownColumnError (cdk.es5.js:1780)
    at cdk.es5.js:2111
    at Array.map (<anonymous>)
    at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._getHeaderCellTemplatesForRow (cdk.es5.js:2108)
    at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._renderHeaderRow (cdk.es5.js:2016)
    at SafeSubscriber._next (cdk.es5.js:1952)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)

Is it possible to generate columns dynamically?

EDIT:

Plunker example

• javascript
• json
• angular
• angular-material2

Share Improve this question Follow edited Aug 11, 2017 at 12:09 tprieboj asked Aug 11, 2017 at 10:28 tpriebojtprieboj 1,70366 gold badges3232 silver badges5858 bronze badges 3

• I found this github./angular/material2/pull/5545 ... it does not seems that it is possible in current version :/ – tprieboj Commented Aug 11, 2017 at 11:10
• the issue is resolved but its not been released yet, we will have to wait i guess.. see this for ref : github./angular/material2/issues/6159 – Bhavik Patel Commented Aug 11, 2017 at 11:13
• plunker added (look into console for error) – tprieboj Commented Aug 11, 2017 at 12:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I think you made mistake when were passing cdkColumnDef input to directive

cdkColumnDef='column.columnDef'

it means that cdkColumnDef will get 'column.columnDef' string as value.

If i were you i would write it as:

[cdkColumnDef]="column.columnDef"

or the following options are also available for you:

cdkColumnDef="{{column.columnDef}}"

or

bind-cdkColumnDef="column.columnDef"

Plunker Example

本文标签： javascriptAngular material2 dynamically generate columnsStack Overflow