For Looping in Ionic 5/6 Angular (Beginner)

Ionic Framework Ionic Angular
1

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:

Untitled
Untitled819×463 6.62 KB

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

2

Hi there

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

3

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

image
image370×822 29.3 KB

4

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

5

which problem you are facing now

6

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

Capture
Capture251×513 9.02 KB

7

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