Question

我需要使用没有模型的角度材料表，因为我不知道服务会是什么。

所以我在组件中动态初始化我的MatTableDataSource和displayedColumns：

TableComponent：

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

代码中最重要的部分是：

for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

我在这里动态创建displayedColumns，这意味着;即使我不知道服务会是什么，我可以在表格中显示。

例如displayedColumns可以是这样的：

[“one”，“two”，“three”，“four”，“five”]

或

[ “堆”， “溢出”， “帮助”，“我]

但这不是问题，因为我可以处理它。

但是当我想用HTML显示它时，我无法正常显示因为 matCellDef事：

TableHtml：

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

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

我的问题在这里：

＆LT; mat-cell * matCellDef =“let element”＆gt; {{element.disCol}}＆lt; / mat-cell＆gt;

事实上，我想在单元格中显示element."disCol's value"，但我不知道该怎么做。

否则，除了element."disCol's value"之外，一切都很好。

当我使用{{element.disCol}}显示value of element that has disCols's value时，所有单元格都是空的：

仅使用{{element}}的其他示例：

您还可以看到：

表数据源正在动态变化。这意味着我不能轻易使用{{element.ColumnName}}，因为我甚至不知道它是什么。
- 第一个例子显示的字符= ['Vazife'，'AdSoyad'，'Kirmizi'，'Mavi'，'Yesil'，'Sari'];
- 第二个例子的displayedColumns = ['Muhasebe'，'Ders'，'Egitim'，'Harici'];
matHeaderCellDef是正确的，因为它直接使用{{disCol}}。

但我需要读取disCol的值，并在单元格中显示element.(disCol's value)。

我该怎么做？

Answer 1

我找到了解决办法:) 这很容易，但我一开始看不到:) 只有这样：

        <mat-cell *matCellDef="let element "> {{element[disCol]}}
        </mat-cell>

我必须仅在HTML中使用{{element[disCol]}}。

现在，一切都很好:)

Answer 2

有关基于@mevaka的完整工作示例，

jobDetails$是项目数组。

columns$与Object.keys(jobDetails$[0])等价，因此string[]

  <table mat-table [dataSource]="jobDetails$ | async">

    <ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}">
      <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
      <td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr>
    <tr mat-row *matRowDef="let row; columns: (columns$ | async)"></tr>
  </table>

Answer 3

您可以在下面的链接中找到Angular DataTable的动态列，排序，分页，列级过滤，列重排序，列大小调整

https://www.youtube.com/watch?v=zDvzBK-xyAM

Answer 4

我尽了最大努力将动态表精简到最小。此示例将显示给定带有键的平面对象数组的任何列。注意第一个对象如何具有一个额外的“ foo”属性，该属性导致创建整个列。 DATA const可能是您从服务获得的一些数据。另外，如果您知道一些通用属性名称，则可以在其中添加“列ID->标签”映射，以获取JSON。参见斯塔赫布利茨here。

import {Component, ViewChild, OnInit} from '@angular/core';

const DATA: any[] = [
  {position: 1, name: 'sdd', weight: 1.0079, symbol: 'H', foo: 'bar'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}
];

@Component({
  selector: 'dynamic-table-example',
  styleUrls: ['dynamic-table-example.css'],
  templateUrl: 'dynamic-table-example.html',
})
export class DynamicTableExample implements OnInit {

  columns:Array<any>
  displayedColumns:Array<any>
  dataSource:any
  
  ngOnInit() {
    // Get list of columns by gathering unique keys of objects found in DATA.
    const columns = DATA
      .reduce((columns, row) => {
        return [...columns, ...Object.keys(row)]
      }, [])
      .reduce((columns, column) => {
        return columns.includes(column)
          ? columns
          : [...columns, column]
      }, [])
    // Describe the columns for <mat-table>.
    this.columns = columns.map(column => {
      return { 
        columnDef: column,
        header: column,
        cell: (element: any) => `${element[column] ? element[column] : ``}`     
      }
    })
    this.displayedColumns = this.columns.map(c => c.columnDef);
    // Set the dataSource for <mat-table>.
    this.dataSource = DATA
  }
 
}

<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>
</mat-table>

Answer 5

<mat-cell *matCellDef="let element ">
    {{element[disCol]}}
</mat-cell>

没有模型

5 个答案: