For Looping in Ionic 5/6 Angular (Beginner)-CodePudding

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)
  }

this is the interface

the image

CodePudding user response：

Your ngFor looks fine, I think the problem you are having is how you fill the day array, there are a couple of ways on how to store data into an array, you could try this way:

...
export class YourComponent implements OnInit {
days: number[] = []; // avoid using any as much as possible

 ngOnInit(): void {      
  for(let i = 0; i < 31; i  ) {
    this.days.push(i);
  }
 }
}

And then, in your template HTML:

<div *ngFor="let day of days; let i = index"> <!--if you need the index-->
 ...
 ...

 <ion-input [placeholder]="day" [(ngModel)]="amount"></ion-input>
</div>

For more information about ngFor, go here