mat-table 不填充来自 http 请求的数据

Question

我在 angular 中有一个项目并正在播放，并使用了 angular material 数据 table 我想用来自我的播放服务器的数据填充它作为 json 细绳。当我尝试填充它时，什么也没有显示，好像是空的。我已经提到了我使用的代码库。数据显示在控制台上，没有弹出任何错误。

appService.ts

  public getData() {
    return this.http.get<any>(this.getDataUrl);
  }

table.ts

  displayedColumns = ['name', 'location'];


  clubModels: ClubModel[] = [];
  dataSource;

  ngOnInit() {
    this.appService.getData()
      .subscribe((clubModels: ClubModel[]) => {
        this.clubModels = clubModels;
        // check response
        console.log(clubModels.response);
        this.dataSource = new MatTableDataSource(clubModels);
      }, error => console.error(error));

  }

table.html

<table mat-table class="full-width-table" matSort aria-label="Elements" [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let row">{{row.name}}</td>
  </ng-container>

  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>
    <td mat-cell *matCellDef="let row">{{row.location}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

ClubModel.ts

export interface ClubModel {
  name: string;
  location: string;
}

控制台给出此输出

(3) [
      {name: "aaa1", location: "testLocation1"},
      {name: "bbb2", location: "testLocation2"},
      {name: "ccc3", location: "testLocation3"}
    ]

Answer 1

您的数据在 clubModels.response。您必须从 clubModels.response 创建 MatTableDataSource 作为 this.dataSource = new MatTableDataSource(clubModels.response).

mat-table 不填充来自 http 请求的数据

mat-table doesn't populate data comes form a http request

playframework

angular-material

angular