我正在我的旧 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.
组件.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,
组件.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>
...
最佳答案
看起来您需要迭代 pgee2020
的 data 属性,而不是整个对象本身,这就是您的模板中断的原因。后者是一个对象,您无法使用现有代码对其进行迭代。
进行以下更改:
<tr *ngFor="let rider of pgee2020.data">
....
</tr>
关于Angular:Http 到 HttpClient 的转换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66615051/