如何从 angular 材料表中的嵌套 json 获取数据？ - ANGULAR

Question

我试图从本地主机获取数据，但是当它涉及不同的结构时，我无法理解如何获取数据用户的这些数据。 有什么帮助吗？

这就是我试图接近但失败并得到错误错误的方式：找不到ID为“_id”的列。

Json 文件

{
  "message": "Handling GET requests to User",
  "dataUser": [
    {
      "CountLike": 15,
      "CountShare": 26,
      "id": "5edb6d50d77987442cf1d7ed",
      "Name": "Andy",
      "Point": 40
    }
  ]
}

这是我的 servise.ts 文件

getUsers() {
    return this.http.get('http://localhost:3000/surveys');
}

这是我的 html 文件

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="dataUser _id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser._id }}
    </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="dataUser CountLike">
    <th mat-header-cell *matHeaderCellDef>Like</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser.CountLike }}
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="dataSurvey CountShare">
    <th mat-header-cell *matHeaderCellDef>Share</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser.CountShare }}
    </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="dataUser Point">
    <th mat-header-cell *matHeaderCellDef>Point</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser.Point }}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: displayedColumns"
    (click)="selection.toggle(row)"
  ></tr>
</mat-table>

这是我的 component.ts 文件忽略我如何在接口 xD 上输入名称

export interface Userstructure {
  _id: string;
  CountLike: string;
  CountShare: string;
  Point: string;
}
export interface UserMain {
  message: string;
  dataUser: Userstructure[];
}

@component
displayedColumns: string[] = [
    '_id',
    'CountLike',
    'CountShare',
    'Point',
  ];
users: Userstructure[];
dataSource;
user;
selection = new SelectionModel<Userstructure>(true, []);
ngOnInit(): void {
console.log(this.users);//this return 'undefined' on console.
this.surveyService.getUsers().subscribe((users: Userstructure[]) => {
      this.users = users;
      this.dataSource = new MatTableDataSource(users);
    });
  }

Answer 1

首先，DataSource 需要一个对象数组，并且您为它提供了 object（基于您提供的示例 Json）。 因此，您只想使用响应的dataUser部分。

this.surveyService.getUsers().subscribe((users: Userstructure[]) => {
  this.users = users.dataUser;
  this.dataSource = new MatTableDataSource(users.dataUser);
});

}

第二件事 - displayColumns 名称必须与matColumnDef中的displayedColumns名称匹配。 此外，您不希望在列名中添加任何空格 - 这些都被转换为 id 和 css 类，因此您可能希望它们保持简短和简单。 只需从列名中删除dataUser部分（注意 - 也删除空格）。 这应该可以解决您最初的问题 - 尚未检查代码的 rest，但这应该会让您走上正轨。