Loop through two arrays simultaneously using *ngFor in IONIC2/Angular2

Within the context of a single ion-list, I have populated two arrays with values to iterate through: Billerstatusstate and Billerstatusnamelst.

I attempted the following iterations:

<ion-list ion-item *ngFor="let stat of Billerstatusstate; let bil of Billerstatusnamelst"  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

as well as

<ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst"  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

The issue is that it is using the first value iterated for both local variables.

Is there anything I am overlooking?

Alternatively, is there another method to combine both sets of values into a single array and then separate them in the View using ngFor?

Answer №1

If you're looking to combine your two arrays into one and then loop through the new array, I have a solution for you.

Check out this example:

@Pipe({
  name: 'mergeArrays'
})
export class MergeArraysPipe {
  transform(array1, array2) {
    var mergedArray = [];
    array1.forEach((element, index) => {
      mergedArray.push({ state: element, name: array2[index] });
    });
  }
}

Now, you can use the pipe like this:

<ion-list ion-item *ngFor="let element of stateList | mergeArrays:nameList"  >
  {{element.name}} <button round>{{element.state}}</button>
</ion-list>    

Answer №2

To accomplish this, you can make use of the index provided by the ngFor directive.

<ion-list ion-item *ngFor="let stat of Billerstatusstate; let i=index">

  {{Billerstatusnamelst[i]}} <button round>{{stat}}</button>

</ion-list>

Answer №3

How about trying a different approach:

<ion-list ion-item *ngFor="let stat of Billerstatusstate; let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

Rather than the above method, consider consolidating the data into a single array:

// Assuming both arrays are of the same length
for (var _i = 0; _i < Billerstatusstate.length; _i++) {
    this.singleArray.push({
                         stat: this.Billerstatusstate[_i],
                         bil: this.Billerstatusnamelst[_i] 
                        });
}

In your page template, iterate through the single array like so:

<ion-list ion-item *ngFor="let item of singleArray;"  >

  {{item.bil}} <button round>{{item.stat}}</button>

</ion-list>

Answer №4

I decided to try a different approach by storing values in a single array instead of using two separate arrays, all originating from one source.

this.Billerstatusnamelst.push({name:"testname",Status:"Failure"});

When it came to the HTML section:

<ion-list ion-item *ngFor="let bil of Billerstatusnamelst " >

  {{bil.name}} <button round>{{bil.Status}}</button>

</ion-list>

This method worked successfully for me.

Answer №5

Using multiple arrays within a single array

    this.termlist = this.result.termlst.$values;
    this.disableterm = this.result.disableterms.$values;
    this.customlist = this.result.customgrplist.$values;

Implementing the single array code

 this.totalarrayob =[ this.termlist,this.disableterm, this.customlist];

What is the process to call this in HTML using *ngfor?

<ion-col col-12 no-padding *ngFor="let list of totalarrayob;let k = index">
    <h6>Lorem Ipsum</h6>
    <ion-list>
      <ion-item>
        <ion-label>I Term</ion-label>
        <ion-checkbox checked="false"></ion-checkbox>
        <ion-note item-right>
          25000
        </ion-note>
      </ion-item>
    </ion-list>
  </ion-col>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger an Angular2 component function from an HTML element by simply clicking a button

I'm just starting out with TypeScript and Angular2 and encountering an issue when trying to call a component function by clicking on an HTML button. When I use the **onclick="locateHotelOnMap()"** attribute on the HTML button element, I receive this ...

Angular: understanding the intricacies of initializing variables within the *ngFor directive

I'm working with an Angular template that looks like this: <li *ngFor="let item of list | keyvalue" let-rand="random()"> <input type="radio" class="form-check-input" id="radio-{{rand}}" name ...

Component declaration in Typescript is being rejected due to the union type not being accepted

In my current project, I'm working on a component that should accept either an onClick or a to prop. const StickyButton: React.FC< ({ onClick: MouseEventHandler } | { to: string }) & { buttonComponent?: ({ onClick: MouseEventHandler }) =& ...

Having issues with ngbDropdown in Angular 4 from ng-bootstrap?

My dropdown menus are malfunctioning. I attempted to follow advice from this source, where I upgraded to bootstrap 4-alpha, but unfortunately, the issue persists. Here is an excerpt from my package.json file: "@angular/animations": "^4.3.0", ... // ...

Angular build is encountering an issue - Critical error: Inefficient mark-compacts close to heap threshold. Allocation unsuccessful - JavaScript heap exceeds memory capacity

When attempting to run the following command: ng build my.sample.application --prod=false --configuration=dev An error is encountered as shown below. To try and fix this, the following command has been executed: node --max_old_space_size=15000 However, ...

Encountering Difficulties Incorporating Angular Material into Custom Angular Library

While attempting to create a custom library using Angular Material components, I added Angular Material to my Angular project and successfully tested the material components in my application. However, when I tried to use Angular Material within a library ...

Access User Authentication Profile Information in Firebase Utilizing Angular 2

Need assistance with retrieving user profile information from Angularfire Authentication in Angular? Specifically looking to access the user's Facebook profile picture and name. Your help would be greatly appreciated. Thank you! I have attempted the ...

Organizing an angular expansion panel

I am currently dealing with an expansion panel that has a lot of content. The layout is quite messy and chaotic, as seen here: https://ibb.co/Y3z9gdf It doesn't look very appealing, so I'm wondering if there is a way to organize it better or ma ...

Angular has deprecated the use of `isObject` and `isNullOrUndefined` in TypeScript

Upon upgrading from Angular 7 to Angular 10 and implementing TypeScript 4 or higher, I began receiving deprecation warnings for the functions isObject() and isNullOrUndefined() when running ng lint warnings The function isNullOrUndefined has been depreca ...

A Step-by-Step Guide on Including TypeScript Definitions in .NET Core Nuget Packages

Our internal NuGet Package includes both .NET Code and a TypeScript Definition File (*.d.ts). Here is what the package contains: https://i.sstatic.net/7vRxx.png Upon installation of the package into a new .NET Core project, the solution explorer displays ...

Issues with manipulating state using TypeScript Discriminated Unions"Incompatibility with setState

Imagine having a unique type structure like the one shown below: export type IEntity = ({ entity: IReport setEntity: (report: IReport) => void } | { entity: ITest setEntity: (test: ITest) => void }); Both the entity and setEntity fun ...

Using JQuery within Angular 4 is a valuable tool for enhancing the functionality

As a newcomer to Angular, I am experimenting with using jQuery alongside Angular 4. In my search for information, I stumbled upon this question on Stack Overflow. Inside the question, there was an example provided that can be found here. However, when att ...

Angular: Dynamically Displaying Components based on Conditions

I have a unique component design: <div class="custom-component__section {{ style }}"> <header class="custom-component__header"> <ng-content *ngIf="!displayHeader" select="[custom-header]">< ...

Tips for customizing the appearance of a mat-select chosen item?

Is there a way to modify the color of the selected option text in a mat-select component within an Angular 15 project? .html <mat-form-field> <mat-label>From</mat-label> <mat-select panelClass="mat-select-red"> ...

Incorrect deduction of the argument type for a higher-order function

If I wanted to create a function that takes an object of type T and another value, where the type P should somehow be restricted by T (for example, P should be an array of keys of T), I could easily write it like this: function customFunction<T, P exte ...

Tips for importing bootstrap scss efficiently in an angular project to prevent style duplication

Is there a way to optimize an Angular project for utilizing Bootstrap's mixins and variables without constantly importing the styles in every component? Currently, the project I'm working on imports the variables.scss file multiple times due to u ...

Different ways to display entries based on the level of authority

In my jHipster project, I have 4 entities: user, department, userAssignmentToDepartments (where a user may belong to several departments), and order. The questions I have are: How can I display only orders with a department_id that is included in the use ...

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

In my nodejs app, the folder structure is as follows: project |-- src/ | |-- controllers/ | | |`-- authorize-controller.ts | |`-- index.ts |--dist/ | |--controllers/ | | |`-- authorize-controller.js | | |`-- authorize-controller.js.map | ...

The marker is not updating in real-time with the actual latitude and longitude on the Google Maps angular

I have been attempting to update the marker in my Angular Google Map in real-time, but unfortunately it is not working as expected. It only displays the initial static data and then fails to update. Despite conducting a thorough search on Google, I have be ...

Utilizing the subclass type as a parameter in inheritance

Looking for a way to restrict a function in C# to only accept classes of a specific base class type? In my current implementation, I have a base class (which can also be an interface) and n-classes that extend it. Here is what I am currently doing: abstr ...