Angular: Http to HttpClient conversion issue

Question

I'm working on the conversion from Http to HttpClient in my old Angular app. However, during work on the service.ts part, I can't resolve the following error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

component.ts

import { Component, OnInit } from "@angular/core";
import { Rider } from "../interfaces/rider";
import { SpeedwayService } from "../../speedway.service";
import { OrderPipe } from "ngx-order-pipe";

@Component({
  selector: "gs-pgee2020",
  templateUrl: "./pgee2020.component.html",
  styleUrls: ["./pgee2020.component.less"]
})
export class Pgee2020Component {
  pgee2020: Array<any>;
  order: string = "MSC";
  reverse: boolean = false;
  result: number[];
  constructor(
    private _speedwayService: SpeedwayService,
    private orderPipe: OrderPipe
  ) {
    this._speedwayService.getPgee2020().subscribe(response => {
      this.pgee2020 = orderPipe.transform(response, "MSC");
    });
  }

  setOrder(value: string) {
    if (this.order === value) {
      this.reverse = !this.reverse;
    }
    this.order = value;
  }
}

service.ts (old, worked with Http)

getPgee2020() {
    return this._http
      .get("http://node.gurustats.usermd.net:60519/pgee2020")
      .map(result => (this.result = result.json().data));
  }

service.ts (new, not working with HttpClient)

getPgee2020() {
    return this._http
      .get("http://node.gurustats.usermd.net:60519/pgee2020").pipe(map((result => (this.result = result))));
    }

data structure

{
  "status": 200,
  "message": null,
  "data": [
    {
      "_id": "604a882ed87fdb0482536fc9",
      "MSC": 3,
      "ZAWODNIK": "Bartosz Zmarzlik",
      "KLUB": "Gorzów",
      "SREDNIA": 2.43,

component.html

 <tr
            *ngFor="
              let rider of pgee2020 | orderBy: order:reverse;
              let i = index" class="row-zaw"
            [routerLink]="[rider.id]">
          
            <td>{{ rider.MSC }}</td>
            <td>{{ rider.ZAWODNIK }}</td>
            <td>{{ rider.KLUB }}</td>
...

Answer 1

Looks like you need to iterate over the data property of pgee2020 rather than the entire object itself, which is why your template breaks. The latter is an object and you can't iterate over it using the existing code.

Make the following change:

<tr *ngFor="let rider of pgee2020.data"> 
   .... 
</tr>

Answer 2

I resolved my issue with the following change in the service.ts. Nicholas resolved the problem in Angular 5, my can help with Angular 11.

  getPgee2020() {
    return this._http
      .get("http://node.gurustats.usermd.net:60519/pgee2020").pipe(map(res => res ['data']))