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?

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

Ways to exit a loop in TypeScript

I've encountered an issue with the following code where I am struggling to break the loop under certain conditions. Desired Outcome: An error message should display, allowing the user to close it and remove the escalation node correctly. Actual Outc ...

Issue encountered while appending query parameters to HTTP request

While utilizing mock data and the InMemoryDbService similar to the tour of heroes example, I encountered an issue when passing HttpParams. The data loads successfully without any parameters, but as soon as I add them, I receive a 500 response with the erro ...

The callback function inside the .then block of a Promise.all never gets

I'm currently attempting to utilize Promise.all and map in place of the forEach loop to make the task asynchronous. All promises within the Promise.all array are executed and resolved. Here is the code snippet: loadDistances() { //return new Prom ...

The InAppPurchase Plugin in Cordova is throwing the error message "Encountered an error: Cannot access the 'getProducts' property as it is undefined."

Currently, I am utilizing the cordova in-app-purchase plugin for my application. However, I am encountering an error that reads "ERROR TypeError: Cannot read property 'getProducts' of undefined" The .ts file appears as follows: window['plu ...

Generate an array of identifiers from a pre-existing array

I am facing a challenge where I need to create an array of IDs for each element in an existing array whose size is unknown. The twist here is that every set of four elements should have the same ID. As an illustration, if the original array (let's ca ...

Tips for emphasizing active tabs in Angular 6

**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...

Apply a dynamic function to assign a background color to a specific class

Currently, I have a function called getBackground(items) that returns a background color from a JSON file list. Within my application, there is a component that automatically adds a class name (.item-radio-checked) when a user clicks on an item in the list ...

What is the process for moving information between files?

I have two files which are named as, employee-rates-controller.ts: private load() { return this.entityService .load(this.$scope.projectRevisionUid) .then(resp => { localStorage.removeItem('employeerates'); this.$ ...

Transform ECMAScript Observable / Zen Observable into RXJS Observable

I currently have an ECMAScript Observable that is compliant with specifications, specifically sourced from the wonka library. I am facing challenges in converting this type of observable to an rxjs 6 observable. It appears that this conversion was possibl ...

New from Firefox 89: The afterprint event!

Having an issue with this fragment of code: const afterPrint = () => { this.location.back(); window.removeEventListener('afterprint', afterPrint); }; window.addEventListener('afterprint', afterPrint); window.print(); I&apos ...

Exploring the process of adding arrays to highcharts using jQuery

All my coding work has been carried out on FIDDLE I have carefully monitored all the arrays: MARKET[0], MARKET[1], MARKET[2], MARKET[3], MARKET[4], MARKET[5], MARKET[6], MARKET[7]. They display correctly in alerts. However, when I attempted to incorporate ...

Can a unique intrinsic type be created from scratch?

Ever since template literals were introduced in Typescript (PR), we've had access to various useful functions in our types: Uppercase Lowercase Capitalize Uncapitalize For more information, refer to the official documentation. Although it may seem ...

Tips for managing Typescript Generics while utilizing the styled function provided by the '@mui/material/styles' package

import Table,{TableProps} from 'my/table/path' const StyledTable = styled(Table)({ ...my styles }) const CustomTable = <T, H>(props: TableProps<T, H>) => { return <StyledTable {...props} /> } This is the issue I encoun ...

Creating multiple copies of a form div in Angular using Typescript

I'm attempting to replicate a form using Angular, but I keep getting the error message "Object is possibly 'null'". HTML: <div class="form-container"> <form class="example"> <mat-form-field> ...

What is the best way to disable a submit button based on form validity in Angular 4 with ng-content?

Include a form component that consists of an email field, password field, and submit button passed through ng-content. This allows the login form to display a 'Login' button and the register form to display a 'Register' button. Here is ...

Mapping an array based on specific conditions

When using my photo gallery app, I faced a challenge in mapping an array of images based on the user-selected album name. The current setup works perfectly for the 'Cambodia' album where all images are correctly logged in the console after mappin ...

Discover the final index of an array with Angular's ng-repeat functionality

I'm currently working with an Object that contains array values which I am trying to iterate over. Here's a simplified example of what I have: $scope.messages = { "1": [ { "content": "Hello" }, { "content": "How are you" }, { "conte ...

Set the array back to its initial value of 1 using jQuery and

After making substantial edits to this question, I find myself in need of a reset button for the code. The current item needs to be reset back to 1 so that I can use it again, but the issue lies in the fact that only the current item is reset while the hig ...

Pass the type of object property as an argument in the function

I've been having trouble trying to figure this out and haven't been able to find a solution in the TS docs or examples I came across. Essentially, I'm working with a configuration specifying operations on object properties and looking to en ...

Angular 5 Dilemma: Exporting UI Components without Locating Template

My current project involves developing UI Components that will be used in various web projects within the company. Our plan is to publish these UI components as an npm package on our local repository, and so far, the publishing process has been successful. ...