Click here to Skip to main content
15,867,771 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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?
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900