Read a single array and display as list in ionic app

Issue

In the Ionic app, I have an array as below.

The below is from console.log(this.itemlist);

0: Array(4)
0: "Item1"
1: "Item2"
2: "Item3"
3: "Item4"
length: 4

The problem is I am not able to display individual records as a single item in a list view in my ionic app.

My item.html looks like below:

<ion-item no-lines text-wrap class="item" *ngFor="let item of itemlist" >
<p>{{item}}</p>
</ion-item>

My item.ts looks like below:

if(localStorage.length > 0){
    var localStorageArray = new Array();
    for (i=0;i<localStorage.length;++i){
        localStorageArray[i] = localStorage.key(i)+localStorage.getItem(localStorage.key(i));
    }
    var sortedArray = localStorageArray.sort();
}
this.itemlist.push(sortedArray);
console.log(this.itemlist);

Solution

You this.itemlist has the wrong structure.. change your *ngFor to this *ngFor="let item of itemlist[0]"

When you push a value into an array, it is inserted as a new item in the array.. in your case the entire sortedArray is becoming the 0th element in your itemlist

Another solution would be to spread your array inside itemlist instead of using .push, like this

this.itemlist = [...sortedArray]

Answered By - Chetan Bansal