使用动态类对象创建材质表答案

【问题标题】：Creating a material table with dynamic class object使用动态类对象创建材质表
【发布时间】：2020-05-03 00:57:38
【问题描述】：

我需要根据来自 API 的数据在 html 中创建一个表（使用较少的后端 ts 代码）。数据将以以下方式出现（针对这个问题进行了模拟）

{ 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"},
            ]},
          ]
        }
      }

当鼠标悬停在单元格上时，背景颜色将用作单元格的背景颜色，注释将用于弹出数据。这属于样式，但我需要根据这些数据创建表。这可能吗？
（尝试从 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);
    }

任何帮助将不胜感激。

【问题讨论】：

标签： html angular dynamic angular8

【解决方案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>

现在开始工作了！！

【讨论】：