时间戳

首页 > 解决方案 > 使用动态类对象创建材质表

html - 使用动态类对象创建材质表

问题描述

我需要根据来自 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);
    }

任何帮助，将不胜感激。

标签： htmlangulardynamicangular8

解决方案

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

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>

得到它现在工作！

推荐阅读