如何将角度材料表与后端数据动态绑定?

Posted

技术标签:

【中文标题】如何将角度材料表与后端数据动态绑定?【英文标题】:How to dynamically bind angular material table with data from backend? 【发布时间】:2020-03-08 22:12:12 【问题描述】:

我正在尝试基于此Angular Material Table Dynamic Columns without model 将 mat-table 与来自后端 api 的数据绑定。这是.ts文件内容


    technologyList = [];
      listTechnology = function () 
        this.http.get("https://localhost:44370/api/admin").subscribe(
          (result: any[]) => 
            this.technologyList = result;
            //creating table begins here
            var displayedColumns = Object.keys(this.technologyList[0]);
            var displayedRows = Object.entries(this.technologyList[0]);
            this.dataSource = new MatTableDataSource(this.technologyList);
            

我收到来自后端的回复为technologyList这是 >


    Array(2)
    0: id: 1, technologyName: "Python", description: "Python123", commission: "20", imageURL: "https://cutt.ly/gePgUvn", …
    1: id: 2, technologyName: "Ruby", description: "Python123", commission: "30", imageURL: "https://cutt.ly/gePgUvn", …
    length: 2

我正在尝试使用 .html 文件将其与 html 绑定 >


        <div>
        <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>
    </div>

输出是一个空白的白色块。我在这里做错了什么?任何帮助将不胜感激,谢谢。

建议更改后的响应 output table

【问题讨论】:

【参考方案1】:

试试这样:

Working Demo

  displayedColumns = [];
  dataSource;


 listTechnology = function () 
        this.http.get("https://localhost:44370/api/admin").subscribe(
          (result: any[]) => 
            this.technologyList = result;
            this.displayedColumns = Object.keys(this.technologyList[0]);
            this.dataSource = new MatTableDataSource(this.technologyList);
        )
  

【讨论】:

显示完整的结果输出 我的意思是console.log(result) 你已经显示id: 1, technologyName: "Python", description: "Python123", commission: "20", imageURL: "https://cutt.ly/gePgUvn", … ... 没有帮助,您需要复制并粘贴完整的对象,以便我可以看到属性 解决了。除了 adminUser 的每个单元格显示为 null 的缺失值之外,其余的一切都工作正常。我从 html 文件中删除了本机 html 表格标签 tr,td 并且工作正常。非常感谢:)

以上是关于如何将角度材料表与后端数据动态绑定?的主要内容,如果未能解决你的问题,请参考以下文章

带单选按钮的角度动态 html 绑定

Java动态绑定与多态

使用 formcontrol 将数据绑定到角度材料表中的复选框。数据以真假值列表的形式提供

弹出窗口上的角度2传单动态绑定

从编译器角度理解虚函数静态绑定和动态绑定

从编译器角度理解虚函数静态绑定和动态绑定