Tips for utilizing parent index as a parameter in a nested *ngFor loop

Having trouble passing my parent index to a nested ngFor in order to access an array of names like "name1, name2, etc."

<ion-item *ngFor="let b of banca ; let i = index">
   <ion-select>
       <ion-select-option *ngFor="let n of name + [i+1]" [value]="n">{{n}}</ion-select-option>
   </ion-select>
</ion-item>

Error:

Cannot find a differ supporting object 'undefined1' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Have experimented with different combinations without success. Any guidance on the correct syntax for passing the value would be appreciated.

Thank you!

Answer №1

The question seems a bit unclear, but it appears that what you are attempting to do will not work. In your example, name0 is the list, followed by name1, name2, and so on. The error message indicates that "Undefined1" is not an array because even name does not exist. If your intention is to iterate through an array within the initial array, you can achieve this using the following code:

<ion-item *ngFor="let b of banca ; let i = index">
   <ion-select>
      <ion-select-option *ngFor="let n of b.name[i]" [value]="n.attribute"></ion-select-option>
   </ion-select>
</ion-item>

Here, attribute can represent any value within that array.

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

A powerful trio: Axios, Typescript, and Promises

I am facing a TypeScript dilemma. I have a REST method that is being called within my http library by Vue action. I want the resolve() method to return the typed array, but if I do not convert it within the action.ts "then" method, I get a '.length do ...

The designation of 'Observable<Observable<Object[]>>' does not match the type of 'Observable<Object[]>'

I was previously working with Angular 2/4 without any issues. However, after upgrading to Angular 7, I started encountering this error consistently across my application. What could have caused this sudden problem? Type 'Observable<Observable<O ...

Import failures in Three.js could be attributed to potential issues with Webpack

Please note: I am utilizing create-react-app along with three.js v0.99.0. In my current project, I am faced with the challenge of importing specific modules from three.js to avoid bundling the entire library, which results in a large uncompressed file siz ...

How can unicode (%u2014) be handled in JavaScript or C#/.NET?

While browsing through the vast expanse of the internet (specifically on a review site like Rotten Tomatoes), I stumbled upon %u2014. This particular string reminded me of something I once encountered in JavaScript. Although I can't quite recall if it ...

Tips for displaying an alpha-numeric keyboard in a React Native application

I am struggling to display an alpha-numeric keyboard in my React-Native App. I have tried various values for the keyboardType prop, but none of them seem to work for me. If anyone has any suggestions on how I can achieve this, please do share your ideas w ...

Connecting Peers in Windows Store App using HTML/JS

I am curious to find out if anyone has successfully created a peer-to-peer app for the Windows Store using HTML5 and JavaScript. I want client A of the app to be able to establish a connection with and send data to client B through either a TCP or UDP sock ...

Transmitting information through socket.emit from the client to the server

I'm facing an issue while trying to send numeric data from the client to the server using socket.emit. The problem is that the server doesn't seem to be receiving any data, as only `null` gets logged or I might be doing something wrong in my appr ...

Can Angular JS apply the uppercase filter to a boolean value?

My Angular 1.4.12 binding looks like this: {{ mob.mobDataSettings[7].value | uppercase }} The first part is a boolean value from a JSON file, which can be either true or false. But when rendered in HTML, it is not showing up as uppercase (e.g. TRUE), in ...

What is the optimal parameter order when utilizing pre-curried functions and composition in JavaScript?

We have a simple, mathematically curried function for subtracting numbers: function sub(x) { return function (y) { return x - y; }; }; sub(3)(2); // 1 The function signature matches the obtained result. However, when function composition comes i ...

Leveraging Angular Universal Prerendering to fetch content from /static/data.json using the httpClient module

I am currently exploring how to prerender a component using Angular Universal, which involves fetching data with httpClient from the app's /static folder. How can I correctly utilize httpClient in Angular Universal? Is it feasible to access static r ...

quickest method for retrieving a property by name, regardless of its location within the object hierarchy

I am looking for a solution to retrieve the value of a property from an object graph, and I am wondering if there is a more efficient alternative to the method I have outlined below. Instead of using recursion, I have chosen tree traversal because it cons ...

The React loader fails to function properly when used with nested routes

I'm currently working on my App.js file where I have defined all the routes for my application. I wanted to implement React-Router data loader functionality. import React from 'react' import { Routes, Route, Navigate, RouterProvider, createB ...

Validating IDs by comparing them with one another. If the IDs do not match, an error message will be displayed. If they do match, the corresponding data will

Contents: Overview of the code's functionality. CODE Achievements. Bugs Expected vs. Actual Output Attempts to troubleshoot the errors 1. Overview of the Code's Functionality This system functions as a clock in and out mechanism utilizing an R ...

What is the process for importing the Scale type definition from the Scale module?

Recently, I've been utilizing the Tonal package within a Vite/Vue/Typescript project. My current task involves importing the type known as Scale from the Scale module. You can find the type definition here: export interface Scale extends ScaleType { ...

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

The for loop encountered an uncaught type error when trying to access the .length property

Currently, I am working on a school project where the task is to create a basic social network posting application using Django and JavaScript. The purpose of using JavaScript is to dynamically load posts onto the webpage and update HTML components. I have ...

Efficiently Loading AJAX URLs using jQuery in Firefox

setInterval(function(){ if(current_url == ''){ window.location.hash = '#!/home'; current_url = window.location.hash.href; } else if(current_url !== window.location){ change_page(window.location.hash.split('#!/&apo ...

Functionality of the button disabled in Firefox, despite working perfectly in Chrome

I have been developing a ReactJS application that is now live. Take a look at the deployed version to understand the issue I am facing. In Firefox, the Login button in the Inventory Login section doesn't seem to be working as expected. Despite having ...

Steps for refreshing Google reCAPTCHA on an AJAX-enabled webpage

I am encountering an issue with two captchas on my website. One captcha is loaded upon refresh, while the second captcha is loaded on a different page via ajax. The problem arises when I click on the "No" button after selecting it on the second page. I wan ...

Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue. it('verifies pre ...