splunk splunk - 2 months ago 19
TypeScript Question

Can't retrieve data from array with ionic2

I'm creating an app using Ionic2 and I'm trying to print a list of songs titles from an array.
I have these 2 files, but I can't get the list of songs, I don't even get errors and warnings.

songlist.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Page} from 'ionic-angular';

@Component({
templateUrl: 'build/pages/songlist/songlist.html',
})

export class Songlist {
songs
test
constructor(private navCtrl: NavController) {
this.songs = ['Song 1','song 2','song 3'];
this.test = "this is a test";
}
}


songlist.html

<ion-header>
<ion-navbar>
<ion-title>Ionic 2 Application</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
{{test}} // "this is a test" is correctly printed
<ion-list class="messageList">
<ion-item *ngFor="let item of songs">{{item}}</ion-item>
</ion-list>
</ion-content>

Answer

The songs array is not properly declared:

export class Songlist {
    private songs: Array<string>; // <- That's how the array should be declared

    constructor(private navCtrl: NavController) {
        this.songs = ['Song 1','song 2','song 3'];
    }
}