Angular: Http 到 HttpClient 的转换问题

Question

我正在我的旧 Angular 应用程序中处理从 Http 到 HttpClient 的转换。但是，在 service.ts 部分工作期间，我无法解决以下错误：

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（旧，使用 Http）

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

service.ts（新的，不使用 HttpClient）

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

数据结构

{
  "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

看起来您需要遍历 pgee2020 的 data 属性而不是整个对象本身，这就是您的模板中断的原因。后者是一个对象，您不能使用现有代码对其进行迭代。

进行以下更改：

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

Answer 2

我通过 service.ts 中的以下更改解决了我的问题。 Nicholas 在 Angular 5 中解决了问题，我可以帮助解决 Angular 11.

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

Angular: Http 到 HttpClient 的转换问题

Angular: Http to HttpClient conversion issue

service

http

observable

typescript

angular