使用web api时，提供的数据源与数组、Observable或DataSource不匹配

Question

我尝试使用web api数据放置材料表

我的回复看起来像：

{
"Code": "1",
"Message": "Role List",
"Data": [
{
"id": 1,
"name": "Employee"
},
{
"id": 2,
"name": "Admin"
} 
]
}

当我尝试运行代码时；提供的数据源与数组、Observable或DataSource"不匹配；

我的html文件：

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


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



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

我的component.ts文件：

export interface User {   name: string;  id: number;  }const ELEMENT_DATA: User[] = [];

export class ListCompanyComponent implements OnInit  
{
displayedColumns: string[] = ['id', 'name' ]; 
dataSource = ELEMENT_DATA;  
listUsers :User[]=[];
constructor(private CommonService:CommonService){}
ngOnInit(): void {
this.getalldata();
}
getalldata()
{
this.CommonService.listUsers().subscribe(data=>{
this.listUsers=data;
})
}
}

我的服务文件：

listUsers():Observable<User[]>
{
return this.http.get<User[]>(this.LURL + 'users')
}

如何克服这个问题。。

Answer 1

您的响应由Code、Message和Data组成，但很明显，您想传递给dataSource的只是Data部分
因此，您可以修改getalldata()方法，使用data.Data而不是data来实现目标

{
this.CommonService.listUsers().subscribe(data=>{
this.listUsers= data.Data;
})

编辑：
您还需要更改listUsers()的类型以接收any，或者您可以使用包含Code、Message和Data的实际响应创建一个接口，并将其作为方法的类型传递

listUsers():Observable<any>
{
return this.http.get<any>(this.LURL + 'users')
}