Utilize Array.push to add 2 new rows to a table using Angular 4

I have two arrays that are almost identical, except for two items which are the fakeDates:

 this.prodotti.push({ idAgreement: this.idAgreement,landingStatus: this.landingStatus, landingType: this.landingType, startDate: this.startDate, expirationDate: this.expirationDate, landingURL: this.landingURL, landingRequestURL: this.landingRequestURL, landingTaegMax: this.landingTaegMax, landingPF: this.landingPF });

 this.prodotti2.push({ idAgreement: this.idAgreement,fakeExpirationDate:this.fakeExpirationDate,fakeStartDate:this.fakeStartDate, landingStatus: this.landingStatus, landingType: this.landingType, startDate: this.startDate, expirationDate: this.expirationDate, landingURL: this.landingURL, landingRequestURL: this.landingRequestURL, landingTaegMax: this.landingTaegMax, landingPF: this.landingPF });

Every time I try to insert them into my html table, it adds 2 rows instead of just 1, even though in my code the bound array is prodotti2

Html: 

<tr *ngFor="let row of prodotti2; let i = index">
            <td>
              <div class="celleProd">
                <input class="mdl-textfield__input" type="text" style="text-align: center" value="{{row.landingType}}" id="sample3" pattern="[A-Za-z0-9]+"
                  readonly="true">
              </div>
            </td>

Why does it create 2 rows each time I push the 2 arrays?

arraysangulartypescripthtml-table

Answer №1

Utilize console.log(prodotti2) to check for a singular item within it. Additionally, when implementing *ngFor, avoid using id = sample3; it would be more optimal to utilize id= sample{{i}} instead. My apologies as I lack the reputation to leave a comment.

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

Encountering an "Unexpected token" error when importing a JSON file in TypeScript even though the JSON is valid

I recently read an article on Hacker Noon about importing JSON into TypeScript, and decided to give it a try in my code. Here's the import line I used: import data from './assets/fonts/helvetiker_bold.typeface.json'; To test if the import ...

jsontypescript

Combine JavaScript array objects based on their unique IDs

Looking to combine 2 arrays of objects based on IDs (ID and AUTOMOBIL). However, the current code only saves the last array of objects (OPREMA). Any suggestions on how to merge all of them correctly? If the ID in a1 is == 1, I want to save all OPREMA wher ...

javascriptarrays

Transforming a "singular or multiple" array into an array of arrays using TypeScript

What is causing the compilation error in the following code snippet, and how can it be resolved: function f(x: string[] | string[][]): string[][] { return Array.isArray(x[0]) ? x : [x]; } Upon inspection, it appears that the return value will constantly ...

arraystypescript

The presence of a default value within an Angular ControlValueAccessor triggers the dirty state due to

My task is to create dynamic Input components for a template driven form using a directive. The default value of the Input component should be set by the component itself. However, I encountered an issue where setting a default value automatically marks t ...

javascriptangularformscontrolvalueaccessor

Angular 7 - Personalized Name for Formbuilder's Dynamic Form

Currently, I am developing a form builder with Angular: return this.fb.group( { myaccount: [ '', [Validators.required]] } ); When an error message is thrown for an element, I iterate through the form controls and disp ...

angularformbuilder

Using Typescript to define unions with multiple callback types

While in the process of converting my code to TypeScript, I encountered a dilemma. I created a generic foreach function that can handle arrays and objects, with different types of callbacks for iteration. However, I'm unsure how to specify the type wh ...

javascripttypescript

How do I submit an array of objects in Laravel?

I am currently working with a dynamic table that allows users to add and delete rows. Each row contains input fields where users can enter data for an object. At the moment, I am manually assigning index numbers to the name attribute like this: <input ...

htmlarrayslaravelformslaravel-blade

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

data() { return { positive_rule: [ { positive_rule: "", }, ], }; }, methods: { addMore() { this.positive_rule.push({ positive_rule: "", }); }, ...

javascripttypescriptvue.jsfrontendvue-component

"Learn the steps for accessing the most recent version of a ReactJS application from the server

I have my react app hosted on a Netlify domain. How can I ensure that users who have previously loaded older versions of the app are redirected to the most recent deployed version? ...

javascriptreactjstypescriptreact-hooksnetlify

Issue with form.io: Custom component not displaying on the form

I'm having trouble implementing form.io with a custom component named MeComponent. Unfortunately, it doesn't seem to be rendering properly and I can't pinpoint what's missing. Here are the steps I've taken. app.module.ts import { ...

angularformio

Tips for looping through a JSON object in Angular 4 and extracting the values for Add, intA, and intB fields to populate a list

What is the best way to loop through the following JSON in a .ts file and extract the integer fields and operations like 'Add' into a list using Angular 2? let json = { "Header": null, "Body": { "Add": { "intA": "2","intB": "3" }}}} ...

angular

Tips for sending parameters in Next.js without server-side rendering

I followed the documentation and tried to pass params as instructed here: https://nextjs.org/docs/routing/dynamic-routes However, I encountered a strange issue where the received params are not in string format. How is it possible for them to be in an arr ...

reactjstypescriptnext.js

Utilizing a component from a different module

Currently working on Angular 4 and facing an issue with referencing a component from another module. In my EngagementModule, the setup is defined as below: import { NgModule } from '@angular/core'; // other imports... @NgModule({ imports: [ ...

angulartypescriptangular2-template

Revealing a single element in an Angular 6 application that is utilized by several modules

As I am in the process of breaking down a large module into smaller ones, I have encountered an issue that needs to be addressed. Here are the specifics: The Search component is currently being used across multiple components. Initially, it was declared i ...

angularangular6

Angular10 selection table - reveal expanded row when item is selected

I am currently working with an angular 10 table that includes a selection feature, but I am encountering issues trying to display an expandable row when the user selects a particular row. I have attempted to incorporate expandable tables in conjunction wit ...

angularhtml-tableangular-materialangular-components

The parameter cannot be assigned to type 'HTMLCanvasElement | null' due to conflicting arguments

I am encountering an issue with the following code, as it fails to compile: import React, {useEffect} from 'react' import {Card, Image} from 'semantic-ui-react' import * as chart from 'chart.js' export const PieChartCard = ...

reactjstypescriptreact-typescript

Defining a type with limited knowledge: if you only have one key in the object

Attempting to establish a type for an object Consider the following object structure: { a: 123, b: "hello", c: { d:"world" } } The keys present in the object are unknown. To define its type, I would use Record<st ...

typescript

Angular: Navigating to a distinct page based on an API response

In order to determine which page to go to, based on the response from an API endpoint, I need to implement a logic. The current API response includes an integer (id) and a string (name). Example Response: int: id name: string After making the API call, I ...

angulartypescript

How can an associated array with only NULL values be made most succinctly?

Imagine if you were tasked with generating this array: $myArray=array( 'a'=>null, 'b'=>null, 'c'=>null, 'd'=>null, 'e'=>null, 'f'=>null, 'g&apos ...

phparrays

Angular: Exploring Directives - The Impact of Passing "null" versus an Empty String to the @Input Setter

I've observed an interesting behavior with the @Input setter in a Directive. It seems that when an empty string ("") is passed in the template, the setter method is not initially called. However, if the value "null" or "false" is provided, then the se ...

angularinput