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

我需要从来自API的数据创建一个html表（后端ts代码更少）。 数据将按以下方式提供（针对此问题模拟）

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

---

任何帮助都将不胜感激。

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

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>

...
{{gettablevalue（item.strTableName，行[0]，列.strFieldName）}
...

现在它开始工作了

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>