//users.html
<button ion-item *ngFor="let user of users">
<h2>{{ user.id }}</h2>
<h2>{{ user.name }}</h2>
<h2>{{ user.number }}</h2>
<ion-icon name="arrow-forward" item-right></ion-icon>
</button>
//users.ts
Component({
selector: 'page-users',
templateUrl: 'users.html',
})
export class UsersPage {
users: User[]
constructor(public navCtrl: NavController,
public navParams: NavParams, public githubUsersProvider:
GithubUsersProvider) {
githubUsersProvider.load().subscribe(users => {
this.users = users;
})
}
ionViewDidLoad() {
console.log('ionViewDidLoad UsersPage');
}}
//user.ts (model)
export interface User {
id: number;
number: number;
name: string;
}
//github-users.ts
@Injectable()
export class GithubUsersProvider {
githubApiUrl = 'URL';
constructor(public http: HttpClient) {
console.log('Hello GithubUsersProvider Provider');
}
// Load all github users
load(): Observable<User[]> {
return this.http.get(`${this.githubApiUrl}`)
//.map(res:Response) => res.json().data);
.map(res => <User[]>res);
}
}
// my response URL
{"status": "OK","results": [{"id":"136","number":"255","name":"hello
ionic"},
{"id":"137","number":"256","name":"goodbye"
}]}
I just learned Ionic and don't know what's wrong with my code.
There is an error:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
.