顯示項目分頁時，錯誤找不到支持 object 類型為“object”的“[object Object]”？

Question

我使用 web 應用程序與 ASP.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動作顯示所有item

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