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

Question

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

这就是我试图接近但失败并得到的方式 ERROR 错误：找不到 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 需要一个对象数组，并且您正在为它提供一个对象（基于您提供的示例 Json）。因此，您只想使用响应的 dataUser 部分。

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

}

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