Using *ngFor index value results in an error message saying "The call stack size has reached its maximum limit."

Check out this StackBlitz demo

I have a simple view where I'm looping over HTML using Angular's *ngFor directive. To show more or less content, I'm using the ngx-bootstrap collapse component. The problem is that when I collapse one button, all of them collapse or expand.

To address this issue, I added an index variable in the *ngFor loop to keep track of each button, like so: isCollapsed[i]. The indexing works correctly.

In my .ts file, I initially declared isCollapsed as true, but I encountered an error saying "Cannot create property '1' on boolean 'true'." When I changed it to isCollapsed: boolean[] = [], I faced another error saying "Maximum call stack size exceeded."

Here is a link to the StackBlitz project showcasing the issue - any assistance or solution would be highly appreciated.

javascriptangulartypescriptngforngx-bootstrap

Answer №1

Make sure to initialize the variable isCollapsed.

To do this, simply include the following code snippet:

 constructor(){
    this.attributes.map(item => this.isCollapsed.push(false) );
  }

Check out a functional example here.

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

Is it possible to assign an alternative name for the 'require' function in JavaScript?

To ensure our node module is executable and includes dependencies for requiring modules at runtime, we utilize the following syntax: const cust_namespace = <bin>_require('custom-namespace'); This allows our runtime environment to internal ...

node.jstypescriptvisual-studio-code

When hovering over text in HTML, the image remains unchanged in CSS

Trying to modify the displayed image based on the user's click on different text, my code is structured as follows: $("#zubi a").hover(function() { $("#pic").removeClass().addClass($(this).attr('rel')); }); #pic.p1 { content: url("htt ...

javascripthtmljquerycssimage

Issues arise in Angular 4 when the "Subscribe" function is repeatedly invoked within a for/switch loop

My array of strings always changes, for example: ["consumables", "spells", "spells", "consumables", "spells", "consumables", "spells", "characters", "characters", "consumables"] I iterate through this array and based on the index, I execute different .su ...

javascriptarraysangulartypescriptgoogle-cloud-firestore

What is the process for playing an audio file on a mobile device?

Recently, I encountered an issue with a jQuery statement that plays a created audio file. Strangely, the file plays correctly on my computer but not on my mobile phone. Despite max volume settings, there is no sound when trying to play it on the mobile dev ...

javascriptjquery

Heroku hosting a React/Node application that serves up index.html and index.js files, with a server actively running

It seems like the issue I'm facing is related to my start scripts. After researching online, I've come across various start scripts shared by different people. Some suggest using "start": "node index.js" -> (this doesn't start my server ...

javascriptnode.jsreactjsheroku

What is the best way to eliminate the character &#39; from a string using Javascript?

My dilemma involves a string: "Name : Cool Dude&#39;s Hat" Whenever I attempt to submit it on a forum, an error occurs. However, when I remove the &#39; part, it works perfectly. Is there a way to write JavaScript code that eliminates this issue? ...

javascriptstringescaping

The property 'value' is not recognized on the Element type

I am currently working on a project where I need to calculate the total sum of values entered in a specific column within a mat-table. The setup involves creating a table with three columns: Account Id, Account Description, and Value. Additionally, I have ...

angularangular-material

js extracting information from the XML response using response.text()

Currently, I am sending an ajax request to an API that returns data in XML format. Upon receiving the responseXml data, it gets displayed, but I'm unsure about how to parse it and access specific data elements such as item.line or item.origTime. Shou ...

javascriptjsonxmlreactjsxml-parsing

What is causing TypeScript to incorrectly infer rest parameters in function implementation?

I have created a function that takes a string name and a varying number of parameters which should be inferred from a specific interface. While calling this function results in correct inference, the type is not narrowed down within the function itself. in ...

typescripttypescript-generics

Unable to connect to a live Docker container using public DNS on an AWS EC2 instance

I have a requirement to host my Angular Webapp on an AWS EC2 instance. I followed the steps of creating a Dockerfile within my Angular project and deploying it onto the EC2 instance. Gitlab CI is responsible for building the Angular project and generating ...

angularamazon-web-servicesdockeramazon-ec2

What is the best way to click on a particular button without activating every button on the page?

Struggling to create buttons labeled Add and Remove, as all the other buttons get triggered when I click on one. Here's the code snippet in question: function MyFruits() { const fruitsArray = [ 'banana', 'banana', & ...

javascriptreactjstypescriptreact-hooks

When an HTML input button within a table fails to trigger any jQuery function upon being clicked

I currently have a table set up with multiple rows and columns. <table style="width: 100%;" class='table_result'> <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td> ...

javascriptjqueryhtml

Update and store new polygon coordinates within Google Maps

Within my rails application, I have successfully integrated a Google Maps feature utilizing the polygon drawing tool. The process of adding coordinates and saving them to the database has been executed without any issues. The current challenge I am facing ...

javascriptruby-on-railsgoogle-mapsgoogle-maps-api-3

The const keyword is not automatically inferred as a const when using conditional types for generic type parameters

Within Typescript, the const modifier can be applied to function type parameters. This ensures that the inferred type matches the literal received with as const. function identity<const T>(a: T){ return a } For example, when using identity({ a: 4 ...

typescripttypescript-generics

Windows location does not change after an XMLHttpRequest is made

Here is my code that uses XMLHttpRequest: function SignUp() { signUpConnection = new XMLHttpRequest(); signUpConnection.onreadystatechange = processRegistration; signUpConnection.open('GET', 'index.php?registrarse=&username= ...

javascriptajaxxmlhttprequest

Is there a way for my component to function seamlessly within another component without the need for redundant code?

Is there a way to avoid repeating code when using my component inside another component? For example, in the file NextPage.js, the <LogoutButton/> component does not perform its function. How can I ensure that the <LogoutButton/> behaves the s ...

javascriptreactjs

Change the parent properties within the child component, and then utilize these modified properties again within the child component

I am currently working on a React application where I am facing a challenge with modifying the props passed from the parent component in my child component. My goal is to update the parent props when a counter is clicked in the child component, and then be ...

javascripthtmlreactjscomponentsstate

Tips for utilizing import alongside require in Javascript/Typescript

In my file named index.ts, I have the following code snippet: const start = () => {...} Now, in another file called app.ts, the code is as follows: const dotenv = require('dotenv'); dotenv.config(); const express = require('express' ...

javascriptnode.jstypescriptexpress

Using React useId leads to an invalid selector being generated

Experimenting with attempting to retrieve an element by its id. Take a look at this snippet which demonstrates the issue: function MyComponent(){ const myId = useId(); useEffect(() => { const myComponentDOMElement = document.querySelector(`#${m ...

javascriptreactjsreact-hooks

Utilizing JavaScript to Maximize Window Size on MacOS

I am currently working on customizing the 'Traffic Lights' for macOS in my React/Electron App. The Close and Minimize buttons are functioning perfectly, but I'm facing an issue with the Maximize (green) button. It goes fullscreen when clicke ...

javascriptreactjsmacoselectron