ng-if is only executed once

Earlier today, I encountered an unusual issue while working on an Angular application.

We initialized an Array in the component.ts file during ngInit like this:

for(let i = 0; i < 1; i++) {
    this.cluster[i] = [];
    for(let j = 0; j < 3; j++) {
       this.cluster[i][j] = false;
    }
}

In the component.html file, we utilized a for loop to go through the Array:

<div *ngFor="let col of cluster; let iCol = index" class="col-sm-4 offset-sm-2 col-md-4 offset-md-0">
    <div *ngFor="let row of col; let iRow = index">
       <div*ngIf="(cluster.length < 2 && cluster[0].length < 4)">
            <p>Test</p>
       </div>
    </div>
</div>

According to my understanding, there should be 3 instances of "Test", but we only see one.

Could someone provide insight into where the error might be occurring? Thank you in advance!

Answer №1

Oops, looks like you missed closing the double quotes.

Here is the correct HTML code to use:

<div *ngFor="let col of cluster; let iCol = index" class="col-sm-4 offset-sm-2 col-md-4 offset-md-0">
        <div *ngFor="let row of col; let iRow = index">
            <div *ngIf="(cluster.length < 2 && cluster[0].length < 4)">
                <p>Test</p>
            </div>
        </div>
    </div>
    

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

Error encountered while attempting to deallocate a 2-dimensional array due to double freeing

I have been working on a program that utilizes a structure with a 2d array as fields. However, every time I attempt to use the free_planet function, I encounter a double free error. After running programs like valgrind, it appears that the problematic in ...

Typescript and RxJS: Resolving Incompatibility Issues

In my development setup, I work with two repositories known as web-common and A-frontend. Typically, I use npm link web-common from within A-frontend. Both repositories share various dependencies such as React, Typescript, Google Maps, MobX, etc. Up until ...

Leveraging Amazon IVS Player within Angular

Struggling to integrate the npm version of the amazon-ivs-player with Angular, as it seems optimized for webpack while I am using angular-cli. Following a guide at this link. The issue arises with importing the wasm files in my Angular application: ERROR ...

The nebular element is not displaying correctly

I recently followed the instructions in the official documentation to implement a nebular component into my project. Everything seemed to be working fine with the layout, but I ran into issues when trying to use the card component and other similar compone ...

The Cytoscape layout you are looking for, "cola", does not exist

I am currently utilizing Cytoscape within an Angular 2 project that incorporates Typescript and I am attempting to implement the Cola layout. So, I included the dependency in my project via npm. As I am working with Angular 2 using Typescript, I first adde ...

The computed function is unable to find the property on the specified type

I am a beginner in TypeScript. I have encountered an issue with the code below, which runs perfectly fine in JavaScript but is not compiling here. export default { data: function() { return { data: [ 'Angular', 'A ...

Ways to create a fixed button positioned statically at the bottom of a page

Currently, I am utilizing tailwind CSS to create a webpage with Next and Back buttons for navigation. However, an issue arises when there is minimal content on the page as the button adheres to the top. For visual reference, please view the image linked be ...

Issue with Angular form not displaying data from bound object

Currently, I am in the process of designing an angular form that consists of 2 input fields. The objective is to submit these values to a function for further processing. I have double-checked to ensure that both FormsModule and NgForm have been imported ...

Why do I keep being told that the property doesn't exist?

I have the following code in one file: function test<T extends {}>(arg:T):any { return arg.name } In another file, I have this code: interface IItem { name: string } console.log(test<IItem>({name:'3'})) When I try to access ...

Angular patch value not functioning properly after initial use

Whenever I click on the edit icon, I want the form field to populate. It works correctly the first time, but subsequent clicks on different icons do not update it. However, if I hit the cancel button and then click on any edit button again, it works fine. ...

What is the process for importing an mp3 file into a TypeScript project?

I'm currently working on a web application using React and TypeScript. My current challenge involves importing an mp3 file for use with the use-sound library, but I keep encountering this error in TypeScript: "Cannot find module '../../as ...

The importance of implementing change detection across every component

Currently, I am exploring Angular's change detection mechanism and I encountered an interesting question. To illustrate, let's consider the snippet of code below: @Component({ template: ` <h1>{{item}}</h1> <button (click ...

Confirm the object received from the API and assign default values

Seeking to extract data from an API and verify if all fields are strings, but if they are missing I aim to assign default values. My intention was to utilize the yup library to validate the object accordingly, ensuring that the returned function is prope ...

Display the Sidebar and Dashboard components once the user successfully logs in to the Angular application

I am facing an issue where my Dashboard and Sidebar Components are not displaying immediately after the user successfully logs in. They only load once I refresh the page. One solution I tried was to navigate to '/dashboard' using this.router.nav ...

Building React Typescript Components with Froala Editor Plugins

Attempting to integrate a custom plugin into a Froala Editor within my React application using the package react-froala-wysiwyg. Following a tutorial on incorporating a custom popup/plugin found here. Encountering an issue due to TypeScript incompatibility ...

How can I specifically activate the keydown event for alphanumeric and special characters in Angular7?

I am looking to create a keydown event that will be triggered by alphanumeric or special characters like #$@. <input type="text" style="width: 70%;" [(ngModel)]= "textMessage" (keydown) ="sendTypingEvent()" > However, I want to prevent the event ...

Prevent toggle button from activating panel expansion

Is there a way to add toggle buttons to the description section of an expansion panel without triggering the expansion panel when interacting with the buttons? I have included an example here. ...

Step-by-step guide on incorporating HTML into a popover within Angular4

After successfully implementing a hover popover in Angular using PopoverModule from ngx-popover, I now need to modify the content inside the popover. My search led me to this example: <ng-template #popContent>Hello, <b& ...

What is the best way to swap out the Nan values for other values within an array?

I've tried various methods and reviewed the provided source code but I am unable to retrieve the values from the array. If I exclude the int in the for loop, I get NaN values. When including the int statement, the value turns into 0.00 which doesn&apo ...

Using Angular2 rc3 to inject router into unit tests

After the transition to Angular2 rc3, I've encountered issues with tests that require the Router injection. Previously, I relied on the ROUTER_FAKE_PROVIDERS from the router/testing file, but it appears that it is no longer available. Can anyone offer ...