I work on a web application with ASP.NET Core 6 and Angular 13.
This application displays a list of items successfully without any issue. My issue happens when there's pagination for the items displayed.
I get an error in the console:
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)
What I have tried:
What I tried is:
(1) Create Web API action to display all items
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);
}
When I call this action method, it returns json data as shown here:
{
"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) In Angular 13, I created a service in service.ts:
export class ErpServiceService {
constructor( private http: HttpClient ) { }
getAll(): Observable<any> {
return this.http.get(baseUrl);
}
(3) I created a component items logic in component.ts:
ngOnInit(): void {
this.retrieveAllItems();
}
retrieveAllItems(): void {
this.erpservice.getAll()
.subscribe(
data => {
this.items = data;
console.log(data);
},
error => {
console.log(error);
});
}
(4) I created a component view 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>
How to apply pagination on item rows displayed?