Utilizing HTML and Ionic 3.x: Implementing a for loop within the HTML file by utilizing "in" instead of "of"

Question

Utilizing HTML and Ionic 3.x: Implementing a for loop within the HTML file by utilizing "in" instead of "of"

I am working with multiple arrays of objects in my typescript file and I need to simultaneously iterate through them to display their contents in the HTML file. The arrays are always the same size, making it easier to work with. Here is what I currently have:

<ion-item>
  {{array1[i]}} {{array2[i]}} {{array3[i]}}
</ion-item>

My initial attempt at using ngFor for the iteration encountered an error: "Can't bind 'ngForIn' since it isn't a known property of 'ion-item'. I then tried a workaround which didn’t seem very elegant:

<ion-item *ngFor="let counter of array1; let i = index">
  {{array1[i]}} {{array2[i]}} {{array3[i]}}
</ion-item>

If you have any suggestions on how to improve this process or if there’s a cleaner way to achieve the desired result, I would greatly appreciate it :)

Thank you!

angular typescript for-loop ionic2 ionic3

Answer 1

Answer №1

Your most recent solution is impressive, but there's another approach to consider:

TS

for (let i = 0; i < n; i++) { // n represents the length of the array
   this.globalArray.push({ a1: array1[i], a2: array2[i], a3: array3[i] });
}

HTML

<ion-item *ngFor="let item of globalArray;">
  {{item.a1}} {{item.a1}} {{item.a1}}
</ion-item>

Answer 2

Your most recent solution is impressive, but there's another approach to consider:

TS

for (let i = 0; i < n; i++) { // n represents the length of the array
   this.globalArray.push({ a1: array1[i], a2: array2[i], a3: array3[i] });
}

HTML

<ion-item *ngFor="let item of globalArray;">
  {{item.a1}} {{item.a1}} {{item.a1}}
</ion-item>

Answer 3

Answer №2

This seems quite straightforward

    <ul>
    <li *ngFor="let item of list1">{{item.property}}</li>
    </ul>
   </ul>
    <ul>
    <li *ngFor="let item of list2">{{item.property}}</li>
    </ul>
   </ul>
    <ul>
    <li *ngFor="let item of list3">{{item.property}}</li>
    </ul>
   </ul>

Answer 4

This seems quite straightforward

    <ul>
    <li *ngFor="let item of list1">{{item.property}}</li>
    </ul>
   </ul>
    <ul>
    <li *ngFor="let item of list2">{{item.property}}</li>
    </ul>
   </ul>
    <ul>
    <li *ngFor="let item of list3">{{item.property}}</li>
    </ul>
   </ul>

Utilizing HTML and Ionic 3.x: Implementing a for loop within the HTML file by utilizing "in" instead of "of"

Answer №1

Answer №2

Similar questions

Error: When running the NPM CI command in a GitHub action, the package nice-napi is not accessible from

Utilizing Service within Express Router

Creating eight equal sections within HTML <div> elements using Bootstrap

Deploying Angular 5 to Azure App Services is causing deployment issues

Limit the types of components allowed as children in a React component by utilizing TypeScript

Encountering problems with TypeScript in a Node application when using the package manager

Using Typescript/JSX to assign a class instance by reference

Kubernetes directs incoming traffic to the /api/* endpoint through nginx

Maximizing Performance of JSON.stringify in Angular

Guide on utilizing Subscribe Observable for performing lookup in Angular

Angular - Error: Cannot find module 'fs'

Generating a random number to be input into the angular 2 form group index can be done by following these

Angular is giving me an undefined Array, even though I clearly defined it beforehand

Fulfill the promise to retrieve the value contained within

Angular failing to retrieve URL parameters correctly

Resolve the Angular proxy issue with the backend

Displaying data from a service on an Ionic screen: a comprehensive guide

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

What allows the type expression to be considered valid with a reduced amount of arguments?

What are the steps to implement Owl Carousel 2 in Angular2?