mat-table - マットテーブル共通テンプレートが読み込まれない

Question

TS ファイルから列を受け入れてデータをロードする汎用テーブルを作成しようとしています。

このエラーを取得:

ng:///AppModule/TableBasicExample.ngfactory.js:56 エラー エラー: ID "[object Object]" の列が見つかりませんでした。

コード：

/*
* @title Basic use of <table mat-table>
 */
@Component({    
  selector: 'table-basic-example',    
  styleUrls: ['table-basic-example.css'],    
  templateUrl: 'table-basic-example.html',    
})
export class TableBasicExample implements OnInit {     
  displayedColumns: Column[] = [    
    {headername:"name", field:"name"}    
  ];
  dataSource : MatTableDataSource<PeriodicElement> = new MatTableDataSource();    

  ngOnInit() {    
    this.dataSource = new MatTableDataSource(ELEMENT_DATA);    
    console.log(this.dataSource.data);        
    console.log(this.displayedColumns,"columns");      
  }
}

<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">        

  <!--- Note that these columns can be defined in any order.    
        The actual rendered columns are set as a property on the row  
  definition" -->   

  <!-- Position Column -->

  <ng-container *ngFor= "let column of displayedColumns"  
  [matColumnDef]="column.headername">   
    <th mat-header-cell *matHeaderCellDef>{{column.headername}}</th>    
    <td mat-cell *matCellDef="let element"> {{element}} </td>               
  </ng-container>    
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>    
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr></table>