gpt4 book ai didi

angular - 错误: Cannot find a differ supporting object '[object Object]' of type 'object' . NgFor只支持绑定(bind)到Iterables比如Arrays

转载 作者:太空狗 更新时间:2023-10-29 19:29:19 25 4
gpt4 key购买 nike

我已经成功地从 jsonplaceholder fake api 获取数据 https://jsonplaceholder.typicode.com/posts

我正在尝试使用 angular 2 {{}} 绑定(bind)它,但出现以下错误。我不知道我做错了什么,如果有任何人可以帮助我,那将是满满的。以下是我的代码和错误。

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

import { Component } from '@angular/core';
import {BioService} from './bio.service'
import { Users } from './User';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
values : any;
users: Users[];
errorMessage: string;
mode = 'Observable';

profile = {};
constructor(private bioservice:BioService)
{

}

ngOnInit(){
this.getHeroes();
debugger;
}

getHeroes() {
this.bioservice.getHeroes().subscribe(data => this.profile = data);
}

}

HTML 模板:

<h1>
<div>
<ul *ngFor= "let user of profile">
<li>{{user.userId}}</li>
</ul>
</div>
</h1>

服务:

        import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Users } from './User';


@Injectable()
export class BioService {

private url = 'http://bioapideploy.azurewebsites.net/api/Users';
private placeholderurl = "https://jsonplaceholder.typicode.com/posts";

constructor(private http: Http) { }

getHeroes() {
debugger;
return this.http.get(this.placeholderurl)
.map((res:Response) => res.json());
}

private extractData(res: Response) {
debugger;
let body = res.json();
return body.data || { };
}


private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
debugger;
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}

最佳答案

AppComponent 中将 profile = {}; 更改为 profile: any[];

关于angular - 错误: Cannot find a differ supporting object '[object Object]' of type 'object' . NgFor只支持绑定(bind)到Iterables比如Arrays,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43746353/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com