Reputation: 4421
I've found a few other questions for the same problem but none helped.
here are my list.page.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-list',
templateUrl: 'list.page.html',
styleUrls: ['list.page.scss']
})
export class ListPage implements OnInit {
private selectedItem: any;
private icons = [
'flask',
'wifi',
'beer',
'football',
'basketball',
'paper-plane',
'american-football',
'boat',
'bluetooth',
'build'
];
public items: Array<{ title: string; note: string; icon: string }> = [];
fostan: Observable<any>;
constructor(public httpClient: HttpClient){
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa('username:password')
})
}
this.fostan = this.httpClient.get('https://www.fostania.com/api/items/',httpOptions);
this.fostan.subscribe(data => {
this.fostan = data;
console.log('my data: ', data);
})
}
ngOnInit() {
}
// add back when alpha.4 is out
// navigate(item) {
// this.router.navigate(['/list', JSON.stringify(item)]);
// }
}
and here is how I tried to call it from the .html
file
<ion-list>
<button ion-item *ngFor="let fos of fostan">
title {{ fos.title }}
</button>
</ion-list>
But I get this error in my console :
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
So any idea on how to convert this result into an array to be able to access it from the HTML file?
Upvotes: 0
Views: 43
Reputation: 4085
When the component mounts this.fostan
is an observable, and so let fos of fostan
happens on the observable.
You should move the subscription data to a new instance variable
eg.
this.items = data;
...
*ngFor="let fos or items"
Upvotes: 1
Reputation: 464
fostan is of type Observable, it is not an array :
Change the line :
this.fostan = data;
By :
this.items = data;
And
<button ion-item *ngFor="let fos of fostan">
By :
<button ion-item *ngFor="let fos of items">
Upvotes: 2