使用动态类对象创建材料表

Question

我需要在html中创建一个表(使用较少的后端ts代码)，从来自API的数据。数据将以下面的方式出现(为这个问题模拟)

{ strTableName: "TestTable",  strComment:"Approved", 
        lstTableHeaders:[
          {strFieldName : "Sl No.", strType:"Numeric", lstComments:[]},
          {strFieldName : "Description", strType:"string", lstComments:[]},
          {strFieldName : "Units", strType:"Numeric", lstComments:[]},
          {strFieldName : "Total", strType:"Amount", lstComments:[]},
        ], TableData:
        {
          lstRowData:[
            {iID: 1, lstCellData:[
              {strFieldName:"Sl No.", strValue:"1", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Description", strValue:"Item 1", strComment:"", strBackgroundColor:"red"},
              {strFieldName:"Units", strValue:"1", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Total", strValue:"500", strComment:"", strBackgroundColor:"yellow"},
            ]},
            {iID: 2, lstCellData:[
              {strFieldName:"Sl No.", strValue:"2", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Description", strValue:"Item 2", strComment:"", strBackgroundColor:"red"},
              {strFieldName:"Units", strValue:"3", strComment:"", strBackgroundColor:"green"},
              {strFieldName:"Total", strValue:"1500", strComment:"", strBackgroundColor:"yellow"},
            ]},
          ]
        }
      }

背景颜色将用作单元格的bg颜色，注释将用于在鼠标悬停在单元格上时弹出数据。这属于样式，但我需要的表是从这个数据创建。这个是可能的吗？

(我尝试了从github搜索很多问题，stackoverflow，甚至从angular搜索文档。问这个问题作为最后的手段。)

编辑:在html中使用下面的代码来显示标题。仍在努力获取表中的数据。

              <mat-table #table>
                <ng-container *ngFor="let column of item.lstTableHeaders" [matColumnDef]="column.strFieldName">
                  <mat-header-cell *matHeaderCellDef>{{ column.strFieldName }}</mat-header-cell>
                  <mat-cell *matCellDef="let column">{{ column.strFieldName }}</mat-cell>
                </ng-container>
                <mat-header-row *matHeaderRowDef="item.displayedTableHeaders()"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedTableHeaders();"></mat-row>
              </mat-table>

在ts文件中:我为表格模型添加了另一个函数：

public displayedTableHeaders() : string[]{
        return this.lstTableHeaders.map(x=> x.strFieldName);
    }

任何帮助都将不胜感激。

Answer 1

对于任何想知道的人来说，我通过创建一个函数来解决这个问题，该函数将当前行号和字段名作为键值对，并将其用作数据源。然后，单元格数据将是另一个函数，它将获取当前行号和字段名称，并从该组合中获取值。这样做的唯一缺点是我必须编写一个事件来检测更改，并使用该值来设置原始模型，但我愿意这样做以实现完全动态的表。

public TableSource() {
        var item : any;

        var jsonToBeUsed = [];
        var finalJson = [];

        this.objTableData.lstRowData.forEach(x => {
            x.lstCellData.forEach(y => {
                item = {};
                item.key = x.iID;
                item.value = y.strFieldName;
                jsonToBeUsed.push(item);
            },
            )
            finalJson.push(jsonToBeUsed),
            jsonToBeUsed = [];

        }
        )
        return finalJson;

    }

将此函数用作数据源

<mat-table #table [dataSource]="item.TableSource()">
...
 <mat-cell *matCellDef="let row">
<div contenteditable="true" (keyup)="tableValueChanged(item.strTableName, column.strFieldName, row, $event.target.textContent)">{{gettablevalue(item.strTableName,row[0],column.strFieldName)}}</div>
 </mat-cell>
...
</mat-table>

现在开始工作了!！