What is the best way to execute a method in a component for each iteration in an *ngFor loop in Angular 2

Is there a way to call a method for each iteration of *ngFor and pass the iterated variable as a parameter?

For example:

<li *ngFor="let element of componentModel | keys">{{element.key}}--{{element.value}}</li>

Then, in the component, I have this method:

loadProperty(element:any){
   console.log(element.key);
   console.log(element.value);
}

I would like this function to be called for each iteration and receive the value of the iterated variable as a parameter. Any suggestions?

Answer №1

Searching for this information.

<li *ngFor="let item of componentModel | keys">
      {{item.key}}--{{item.value}}
      {{ retrieveProperty(item) }}
    </li>

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

Retrieve JSON Object using a string identifier

I created a script that takes the ID of a link as the name of a JSON dataset. $('.link').click(function() { var dataset = $(this).attr("id"); for (var i = 0; i < chart.series.length; i++) { chart.series[i].setData(lata.dataset ...

Creating a dynamic list in HTML by populating it with randomly selected words using JavaScript

Check out my awesome code snippet function wordSelect() { var words = ["Vancouver", "Whistler", "Surrey", "Victoria", "Kelowna"]; //List of randomly-selected words from above var selectedWords = []; for(let i = 0; i &l ...

Selecting options in combobox for each row in a table using Angular 2 programmatically

I am currently working on an Angular 2 application using TypeScript. In one of the tables within the application, there is a select control in one of the columns. The contents of this select control are bound to another string array. <table ngContr ...

Issue with Angular application failing to fetch data from JSON server

I've been attempting to retrieve data from a local server, but so far I'm not getting any results. The concept is to have a service handle the retrieval process and return an observable for any components in need of the data to subscribe to. dis ...

I am unsure how this type of jQuery AJAX data : () will be interpreted

I'm not a beginner nor an expert in jQuery. I'm modifying a jQuery code for opencard checkout section. There is a Javascript file in this section that sends data to the server. I came across an AJAX request with data structured like this: url: ...

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

Encountering a Mongoose issue while attempting to load model files from a separate Mean.js project using the require function

I am currently working on a Mean.js project and in the process of familiarizing myself with this environment. To conduct some experiments, I created a parallel project for testing purposes in a separate folder where I am not using the Mean.js framework but ...

Puppeteer: How to wait for an ajax call to complete after a navigation event

When working with my code, I encounter a situation where I need to submit a form, wait for navigation, and then submit a second form. The challenge arises because before submitting the second form, some data needs to be loaded in the form using ajax. I wa ...

Updating route in AngularJS does not populate data (ngRepeat)

Just starting out and trying to figure things out, so bear with me if this is a basic issue. I have two routes set up. localhost:3000 displays a list of objects, while localhost:3000/:slug shows detailed information about a specific product. The initial ...

Issue with OBJLoader showing a blank screen

Does anyone have experience with rendering OBJ files using three.js? I'm having trouble getting them to display on the screen and would appreciate any help or advice. The strange thing is that a simple cube renders perfectly in my project. For those ...

Is there a way to define the route path when using MemoryRouter in Jest without using location or history objects?

Apologies if this question has already been asked before. I have a query regarding MemoryRouter in React. I am able to set initialEntries and initialIndex to customize "location" and "history", but the "match" parameter does not update as expected. It is ...

Efficient communication across angular modules on a global scale

Currently, I am working on a project that involves Angular2 with multiple modules. One of the main modules is called BaseModule, and in addition to that, there are two extra modules - FirstModule and SecondModule. Each module has its own routing mechanis ...

Ignoring TypeScript overloads after the initial overload declaration

Issue An error occurs when attempting to call an overload method for a specific function. The call only works for the first defined overload, causing an error if the call is made to the second overload with mismatched typing compared to the first overload ...

Inspecting tRPC routing for examination purposes

Introduction Within my API, it is essential to authenticate the caller following input validation. The authorization for certain endpoints relies on details provided in the input parameters, such as the specific server-side resource being accessed and the ...

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

After creating a table containing GDP data for country states, I've noticed that when a user clicks on a state row, the child table displaying district GDP appears. However, there seems to be an issue with the child table as it keeps repeating. I&apos ...

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

I need assistance with creating a dropdown field in Angular2. When the user selects "car", I want it to display beside the heading. Can anyone provide guidance on how to achieve this? HTML: <h1>Heading <span *ngFor= "let apps of apps">({{apps ...

What is the best way to determine the moving average of an Object value within an array?

In my dataset, I have an array called 'scores' that contains 4 objects. export const scores = [ { day: '1', Barcelona: 1, Real: 3, Valencia: 0}, { day: '2', Barcelona: 4, Real: 6, Valencia: 3}, { day: '3', Bar ...

Difficulty arises when applying hover effects to animations using callbacks

Currently facing an issue with the hover event in jQuery. There are two side-by-side containers with hover events on both. When hovering, a div containing additional information slides up into view and slides back down when the hover ends. The concept is ...

Paste a data point from an Excel spreadsheet into a JavaScript script

I'm encountering a major challenge. Currently, I am creating a login process for a client and here is the approach I have taken: function Jump(pal){ if (pal=='10528'){window.open('http://www.google.es','_parent')} Subs ...

The user's type from express-session is not being properly detected by Typescript

I have a process where I retrieve the user object from the database and set it on the express-session: export const postLogin = async ( request: Request, response: Response, next: NextFunction ): Promise<void> => { try { re ...