Javascript 如何从角度材质表中的嵌套json获取数据有棱角的

我试图从localhost获取数据，但当它出现在不同的结构上时，我不明白如何在data user上获取这些数据。有什么帮助吗

这就是我试图接近的方式，但失败了 错误：找不到id为“\u 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>

身份证件
{{element.dataUser.\u id}
喜欢
{{element.dataUser.CountLike}
共有
{{element.dataUser.CountShare}
指向
{{element.dataUser.Point}

这是my component.ts文件忽略im如何在接口xD上放置名称

导出接口用户结构{
_id：字符串；
CountLike：字符串；
CountShare：字符串；
点：字符串；
}
导出接口UserMain{
消息：字符串；
dataUser:Userstructure[]；
}
@组成部分
displayedColumns:字符串[]=[
“\u id”，
“伯爵式”，
“CountShare”，
“点”，
];
用户：Userstructure[]；
数据源；
使用者
selection=新SelectionModel（true，[]）；
ngOnInit（）：void{
console.log（this.users）；//在控制台上返回“undefined”。
this.surveyService.getUsers（）.subscribe（（用户：Userstructure[]）=>{
this.users=用户；
this.dataSource=新MatTableDataSource（用户）；
});
}

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

dataUser

部分

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

}

---

第二件事，

displayedColumns

名称必须与

matColumnDef

中的列名称匹配。此外，您不想在列名中添加任何空格，因为这些名称被转换为ID和css类，所以您可能希望保持它们的简短。只需从列名中删除

dataUser

部分（注意-同时删除空格）。这应该可以解决您最初的问题-尚未检查代码的其余部分，但这应该可以让您走上正轨。

我尝试了类似的方法，但它不断给我错误“类型Userstructure[]上不存在属性dataUser”。要解决这个问题，我必须将代码更新为

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