Question

https://stackblitz.com/edit/dynamic-columns-mat-table

这是我到目前为止所做的。

这个表完美呈现，但我的要求是我事先不知道列名，所以我需要提一下像这样的列名

而不是$ {element.description} =＆gt; $ {element.elementname}

OR

$ {element.description} =＆gt; $ {元件＆＃39;描述＆＃39;}

任何建议将不胜感激。谢谢。

HTML

  <mat-table #table [dataSource]="dataSource">
      <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
          <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
             <mat-cell *cdkCellDef="let row">{{ column.cell(row) }}</mat-cell>
      </ng-container>
 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
 <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

Component.ts

export class DataPageComponent implements OnInit,AfterViewInit {

 columns = [
  { columnDef: 'Gender', header: 'Gender',    cell: (element: any) => `${element.Gender}` },
  { columnDef: 'VechiclesOwned', header: 'Vechicles Owned',    cell: (element: any) => `${element.VechiclesOwned}` },
  { columnDef: 'description', header: 'description',    cell: (element: any) => `${element.description}` },
  ];


  displayedColumns = this.columns.map(c => c.columnDef);

  dataSource = new FormDataSource(this.af);

   constructor(public af: AngularFireDatabase) { }
}


 export class FormDataSource extends DataSource<any>{

constructor(private af: AngularFireDatabase){
  super()
  }

   connect():Observable<any[]>{

   return  this.af.list('/data');

   }

 disconnect() {}

}

Answer 1

抱歉，我还没有简单的评论，但似乎材料不是问题（谢天谢地）。虽然如果你做了一个关于你正在做或想做的事情的傻瓜会有所帮助。我实际上已经解决了我自己的问题:-) Here 是我为你快速做出的。抱歉，我使用的是bootstrap而不是Material

如果您只是在角度中使用数组，那么您应该可以在HTML中引用它们：

HTML：

<table>
<thead>
<th *ngFor="let data in array">{{data}}</th>
</thead>
</table>

如何将firebase数据读入带有动态列的简单HTML表或Angular MAT表中

1 个答案: