Recently, I started working with ionic/angular and encountered a problem with ngFor. Although the ngFor loop seems to create columns and cards as expected, the data from my items array is not showing up in the cards. It's puzzling why the columns/cards are being generated but the {{items.key}} data isn't being rendered. Any assistance on this issue would be highly appreciated!
(By the way, this happens to be my first question here, so please inform me if there are any incorrect tags or errors)
The HTML file looks like this:
<ion-content>
<ion-grid>
<ion-row wrap>
<ion-col *ngFor="let item of items" >
<ion-card>
<img src="assets/icon/tuneImage.png" />
<ion-card-header>
<ion-card-subtitle></ion-card-subtitle>
<ion-card-title>{{items.key}}</ion-card-title>
</ion-card-header>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The .ts file contains the following:
export class Page2Page implements OnInit {
public items:any;
data: Observable<any>;
constructor(public http: HttpClient) { }
ngOnInit() {
var url = 'https://thesession.org/tunes/new?format=json';
this.data = this.http.get(url);
this.data.subscribe(data =>{
this.items = Object.assign([], data.settings);
//console.log(this.items[1].key);
})
}
}