Currently, I am in the process of converting my old Angular app from Http to HttpClient. While working on the service.ts section, I encountered an error that I am struggling to resolve:
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>
...