错误 显示项目分页时找不到 'object' 类型的不同支持对象'[object Object]'？

Question

我用ASP开发一个web应用程序。. NET Core 6和Angular 13.

此应用程序成功显示项目列表，没有任何问题。我的问题发生时，有分页显示的项目。

我在控制台得到一个错误:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.mjs:3174:31)
at callHook (core.mjs:2561:1)
at callHooks (core.mjs:2520:1)
at executeCheckHooks (core.mjs:2452:1)
at refreshView (core.mjs:9589:1)
at refreshComponent (core.mjs:10777:1)
at refreshChildComponents (core.mjs:9376:1)
at refreshView (core.mjs:9630:1)
at refreshEmbeddedViews (core.mjs:10731:1)
at refreshView (core.mjs:9604:1)

我尝试的是:

(1)创建Web API操作以显示所有项

public async Task<IActionResult> GetAll(int pageNumber = 1)
{
var allitems = _iitem.GetAllItems();
var result = _pageHelper.GetPage(allitems.AsQueryable(), pageNumber);
var itemsdata = new ItemsPageViewModel
{
items = result.Items,
Pager = result.Pager
};
return Ok(itemsdata);
}

当我调用这个动作方法时，它返回json数据，如下所示:

{
"items": [
{
"id": 3,
"itemNameER": "قلم",
"itemNameEN": "pen",
"description": "1"
},
{
"id": 4,
"itemNameER": "قلم",
"itemNameEN": "pencil",
"description": null
},
{
"id": 5,
"itemNameER": "قلم",
"itemNameEN": "pen2",
"description": null
}
],
"pager": {
"numberOfPages": 1,
"currentPage": 1,
"totalRecords": 3
}
}

(2)在Angular 13中，我在service.ts中创建了一个服务:

export class ErpServiceService {
constructor( private http: HttpClient ) { }
getAll(): Observable<any> {
return this.http.get(baseUrl);
}

(3)我在component.ts中创建了一个组件项逻辑:

ngOnInit(): void {
this.retrieveAllItems();
}

retrieveAllItems(): void {
this.erpservice.getAll()
.subscribe(
data => {
this.items = data;
console.log(data);
},
error => {
console.log(error);
});
}

(4)我创建了一个组件视图component.html:

<table id="customers">
<tr>
<th>Id</th>
<th>ItemNameAR</th>
<th>ItemNameEN</th>
<th>Description</th>
</tr>
<tr *ngFor="let item of items">
<td>{{item.id}}</td>
<td>{{item.itemNameAR}}</td>
<td>{{item.itemNameEN}}</td>
<td>{{item.description}}</td>
</tr>
</table>

如何对显示的项目行应用分页?

Answer 1

我认为当您从后端处理http响应时，您错误地将响应对象分配给this.items，而不是在响应对象中包装的项数组。

你能试一下吗?:

retrieveAllItems(): void {
this.erpservice.getAll()
.subscribe(
data => {
// Here you need to assign the array inside the data-object:
this.items = data.items;
console.log(data);
},
error => {
console.log(error);
});
}