显示项目分页时，错误找不到支持 object 类型为“object”的“[object Object]”？

Question

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 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?

Answer 1

I think when you process the http-response from your backend, you mistakenly assign the response-object to this.items instead of the items-array that is wrapped in the response-object.

Can you try the following?:

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);
      });
}