javascript - 如何将 Angular Material 表与后端数据动态绑定(bind)？

Question

我正在尝试根据此 Angular Material Table Dynamic Columns without model 将 mat-table 与来自后端 api 的数据绑定(bind)。这是 .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 绑定(bind)>

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

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

提议更改后的响应 output table

Answer 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);
        })
  }