CODEWITHSUNDEEP
angularionic-framework
rzp
rzp

Reputation: 165

Displaying data on Ion-List

So basically I'm trying to display 2 informations on a list after a button is clicked. I'm doing like this:

         <ion-item>
           <ion-label position="float" >Hora</ion-label>
           <ion-input [(ngModel)]="hora1" type="number"></ion-input>
         </ion-item>
       </div>

         <ion-item>
         <ion-label position="float">Minuto</ion-label>
         <ion-input [(ngModel)]="minuto1" type="number"></ion-input>
       </ion-item>
       <ion-button expand="block" (click)="SaveInformations()">Save</ion-button>



   <ion-list>
    <ion-item *ngFor="let alarme of alarmeList">
     {{alarme.hora1}} - {{alarme.minuto1}}
    </ion-item>
  </ion-list>

And .ts file: 

alarmeList: any [] =[];

    SaveInformations(){

     let data = {alarmeList: this.alarmeList}
      this.alarmeList.push(data);

    }

But when I click the button, the list fill empty spaces. What I'm doing wrong?

Upvotes: 1

Views: 1063

Answers (3)

Luis Cruz
Luis Cruz

Reputation: 11

You need to do the following code:

Please check the comments

//Declare the list and the variables
alarmeList: any [] =[];
hora1: any;
minuto1: any;


SaveInformations(){
//Then declare the object with the values that you need.
 let data = {
   hora: this.hora1,
   minuto: this.minuto1
 }
//And push the object to alarmeList
  this.alarmeList.push(data);

}

And in the html:

<ion-content padding>
<ion-item>
       <ion-label position="float" >Hora</ion-label>
       <ion-input [(ngModel)]="hora1" type="number"></ion-input>
     </ion-item>

     <ion-item>
     <ion-label position="float">Minuto</ion-label>
     <ion-input [(ngModel)]="minuto1" type="number"></ion-input>
   </ion-item>
   <button expand="block" (click)="SaveInformations()">Save</button>



<ion-list>
<ion-item *ngFor="let alarme of alarmeList">
 {{alarme.hora}} - {{alarme.minuto}}
</ion-item>
</ion-list>
</ion-content>

And it will work.

Please check the example below at the home page.

Here is the example on stackblitz: Ionic App

Upvotes: 1

Maihan Nijat
Maihan Nijat

Reputation: 9344

alarmeList: any [] =[];

SaveInformations() {
  this.alarmeList.push({hora1: this.hora1, minuto1: this.minuto1});
}

You are assigning the object to your list of an array and then trying to push the object into object.

What you need is to push object in the array.

Upvotes: 1

Leandro Hern&#225;ndez Mira
Leandro Hern&#225;ndez Mira

Reputation: 837

Try this:

    alarmeList: any [] =[];
    hora1: any;
    minuto1: any;

    SaveInformations(){

     let data = {hora1: this.hora1, minuto1: this.minuto1}
      this.alarmeList.push(data);

    }

Upvotes: 1

Related Questions