For Looping in Ionic 5/6 Angular (Beginner)

0

I’m very beginner to ionic angular, and I’m having trouble understanding how to handle looping in ionic angular. So I should declare an empty array? in my html page I needed to insert ionic input into an array but couldn’t figure out how.

This is the coding that i am attempting to do:

in HTML

<div ngFor="let d of day; let index as i">
  <ion-item>
    <ion-label></ion-label>
  <ion-list-header>
    <ion label> put your amount: </ion-label>
  </ion-list-header>
  <ion-item >
    <ion-thumbnail slot="start">
      <img src="assets/icon/document.png">
    </ion-thumbnail>
    <ion-input placeholder="1" [(ngModel)]="amount"></ion-input> //need to loop this 30 times
</ion-item>
</ion-item>
</div> 

this is in my .ts file I am not sure where to put the looping

 day : any= [];
ionViewDidEnter() {  
    this.crud.getAllInfo();
    
    for(let i=0; i<31;i++){
      console.log(this.day[i]);
    }
    console.log(this.day)
  }

the screen:

I would really appreciate if someone could help me,thank you!

Hi there

Please review this one - great tutorial on Angular. You solution requires knowledge of Javascript and some Angular concepts.

Use this, Wanaisa

<ion-list>
    <ion-list-header>Put Your Amount</ion-list-header>
    <ion-item *ngFor="let item of day;let i = index">
      <ion-thumbnail slot="start">
        <img src="assets/icon/document.png" alt="">
      </ion-thumbnail>
      <ion-input [ngModel]="amount" placeholder="ammount"></ion-input>
    </ion-item>
  </ion-list>

it will look like this

1 Like

it’s not working… does the code in my ts is correct?

which problem you are facing now

i tried to insert input in one of the input box but the rest will automatically have the same value like this

You need to review Angular tour of heros tutorial. It’s a MUST for beginners.