MatTableDataSource中的資料系結問題與Angular中的物件陣列

當我試圖將物件資料陣列系結到 MatTableDataSource 但表格顯示為空結果時。我想這是資料系結的一個小問題。我已經撰寫了如下代碼。

endPointsDataSource;
  endPointsLength;
  endPointsPage = 0;
  endPointsPageSize = 50;
  allProjectsEndpointsList = [];

  populateCoverage(objList) {
    let tObj = { resourceName: '', endpoints: [] }
    let cont = 1;
    let lastName = ''
    try {
      lastName = objList[0][4];
    } catch (e) { }
    tObj.resourceName = lastName;
    let resourceDefinitionList = [];
    objList.forEach(function (item) {
      let obj = { "projectName": item[6], "method": item[1], "endpoint": item[0], "description": item[3], "summary": item[4], "isManual": item[5] };
      if (lastName == item[4]) tObj.endpoints.push(obj);
      else if (lastName != item[4]) {
        resourceDefinitionList.push(tObj);
        tObj = { resourceName: item[4], endpoints: [obj] }; lastName = item[4]
      }
    });
    var arr: any = []
    arr = tObj;
    resourceDefinitionList.push(arr)
    return resourceDefinitionList;
  }

  showAllProjectsEndpoints() {
    this.resource.getAllProjectsEndpoints().subscribe((results) => {
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }

      this.allProjectsEndpointsList = this.populateCoverage(results['data']);
      this.endPointsDataSource = new MatTableDataSource(this.allProjectsEndpointsList);
    }, (error) => {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }

html模板代碼如下：

<div class="mat-elevation-z8 ">

                    <mat-table [dataSource]="endPointsDataSource">

                        <!-- projectName Column -->
                        <ng-container matColumnDef="projectName">
                            <mat-header-cell *matHeaderCellDef>Name
                                <mat-cell *matCellDef="let element">
                                    {{element.projectName}}</mat-cell>

                            </mat-header-cell>
                        </ng-container>

                        <!-- method Endpoint Column -->
                        <ng-container matColumnDef="method">
                            <mat-header-cell *matHeaderCellDef>Endpoint
                                <mat-cell *matCellDef="let element">{{element.method}}</mat-cell>
                            </mat-header-cell>
                        </ng-container>

                        <!-- endpoint Column -->
                        <ng-container matColumnDef="endpoint">
                            <mat-header-cell *matHeaderCellDef>Endpoint
                                <mat-cell *matCellDef="let element">{{element.endpoint}}</mat-cell>
                            </mat-header-cell>
                        </ng-container>

                        <!-- description Column -->
                        <ng-container matColumnDef="description">
                            <mat-header-cell *matHeaderCellDef>Description
                                <mat-cell *matCellDef="let element">{{element.description}}</mat-cell>
                            </mat-header-cell>
                        </ng-container>
                        
                        <mat-header-row *matHeaderRowDef="endPointsColumns"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: endPointsColumns;"></mat-row>

                    </mat-table>

                    <mat-paginator [hidden]="vulnerabilityLength == 0" matColumnDef="position"
                        [pageSizeOptions]="pageSizeOptions" [pageSize]="vulnerabilityPageSize"
                        [pageIndex]="vulnerabilityPage" (page)="changeVul($event)" [length]="vulnerabilityLength">
                    </mat-paginator>
                    
                </div>

誰能糾正我犯了什么錯誤？

我得到如下的空表：

我得到的資料如下：

uj5u.com熱心網友回復：

你需要檢查你的功能populateCoverage。看看你的陣列的每個元素allProjectsEndpointsList都在路上

{resourceName:...,endpoints:[...]}

所以你需要寫一些

{{elements.endpoints[0].description}}

提示：有時 util 會寫入 td

{{element|json}}

要查看元素的方式-顯然，表格崩潰-

標籤：javascript有角度的打字稿角材料

上一篇：如何將可空型別轉換為不可空型別（在打字稿中）？

下一篇：基于具有映射型別的原始介面擴展具有新屬性集的介面