Calculate the total by subtracting values, then store and send the data in

Question

Calculate the total by subtracting values, then store and send the data in

Help needed with adding negative numbers in an array. When trying to add or subtract, no value is displayed. The problem seems to arise when using array methods. I am new to arrays, could someone please point out where my code is incorrect? Here is my demo code on StackBlitz.

HTML

<div class="p-buttom">
    <ion-button expand="full" color="dark" (click)="add()">Add</ion-button>
</div>
    <div class="size-bg" *ngFor="let num of size;let i = index">
    <span style="display: flex;">
        <ion-col>
            <ion-item lines="none" size="6" class="border">
                <ion-label position="stacked">weight</ion-label>
        <ion-input type="text" class="uppercase" [(ngModel)]="data.weight[i]" name="menuCode"></ion-input>
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-item lines="none" size="6" class="border">
                <ion-label position="stacked">Price</ion-label>
        <ion-input type="text" class="uppercase" [(ngModel)]="data.price[i]" name="menuCode"></ion-input>
            </ion-item>
        </ion-col>
    </span>
    <ion-label style="color: black; ">quantity</ion-label>
    <ion-col size="12">
        <div class="add-quatity">
            <ion-button class="removeBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="MinusMinOrder() ">
               -
            </ion-button>
            <ion-input class="itemCount no-padding" name="quantity" (keypress)="numberOnlyValidation($event)" [(ngModel)]="data.quantity[i]" value="{{addQuantityP[i]}}"></ion-input>
            <ion-button class="addBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="addQuantity(i) ">
                +
            </ion-button>
        </div>
    </ion-col>
    <div>
        <ion-button expand="full" color="danger" *ngIf="i >0" (click)="remove(i)">Delete</ion-button>
    </div>
    </div>
<div>
  <ion-button fill="solid " slot="end" (click)="addMenu() ">Submit</ion-button> 
</div>

Component

add(){
    this.size.push('');
  }

  remove(index) {
    this.size.splice(index,1)
  }
  minusQuantity(i){
    console.log(i);
    this.data.quantity[i]--;
    console.log(this.data.quantity[i]--);
  }
  addQuantity(i){
    console.log(i);
    this.data.quantity[i]++;
    console.log(this.data.quantity[i]++);
  }
addMenu(){
  console.log(this.data);
}

Thanks in advance

angular typescript ionic-framework dynamic-arrays

Answer 1

Answer №1

I have identified the issue in your code. To dynamically create an array, you need to initialize default values for the array of objects.

For example:

size = [];

This is the resulting array that needs to be finalized. Your UI data contains objects with certain properties.

For instance:

{ weight: 0,
  quantity: 0,
  price: 0,
 }

Now that your object is ready, it can be pushed into the size array.

When you click on the

add() {
 this.size.push({ weight: 0,
  quantity: 0,
  price: 0,
 });
}

function, simply push this object each time. In Angular UI, a new object with new values will be created without the need for any complex logic.

I am offering you a comprehensive solution where you can add multiple items simultaneously and test it out. If you require further assistance from my end, please do not hesitate to reach out. Thank you!

Here is the link to access the solution.

Cheers!

Answer 2

I have identified the issue in your code. To dynamically create an array, you need to initialize default values for the array of objects.

For example:

size = [];

This is the resulting array that needs to be finalized. Your UI data contains objects with certain properties.

For instance:

{ weight: 0,
  quantity: 0,
  price: 0,
 }

Now that your object is ready, it can be pushed into the size array.

When you click on the

add() {
 this.size.push({ weight: 0,
  quantity: 0,
  price: 0,
 });
}

function, simply push this object each time. In Angular UI, a new object with new values will be created without the need for any complex logic.

I am offering you a comprehensive solution where you can add multiple items simultaneously and test it out. If you require further assistance from my end, please do not hesitate to reach out. Thank you!

Here is the link to access the solution.

Cheers!

Answer 3

Answer №2

There are a few issues with your code:

The way you're collecting the data won't work when adding nested rows.
The method name for subtracting quantity is incorrect.
You included
```
[(ngModel)]="data.quantity[i]"
```
unnecessarily since there's no two-way binding in use.

I've made some corrections to your code and noted the changes with comments. You can review them on Stackblitz

import {
  Component
} from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  size = [];
  // Changing the data structure to map nested rows
  data = [{
    weight: 0,
    price: 0,
    quantity: 0
  }]

  constructor() {}

  add() {
    this.size.push('');
  }

  remove(index) {
    this.size.splice(index, 1)
  }

  minusQuantity(i) {
    // Stop reducing quantity below zero
    this.data[i].quantity = this.data[i].quantity != 0 ? this.data[i].quantity - 1 : 0
  }

  addQuantity(i) {
    this.data[i].quantity = this.data[i].quantity + 1
  }
  addMenu() {
    console.log(this.data);
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      My app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
   <div class="p-buttom">
        <ion-button expand="full" color="dark" (click)="add()">Add</ion-button>
    </div>
        <div class="size-bg" *ngFor="let num of size;let i = index">
        <span style="display: flex;">
            <ion-col>
                <ion-item lines="none" size="6" class="border">
                    <ion-label position="stacked">weight</ion-label>
            <ion-input type="text" class="uppercase" [(ngModel)]="data[i].weight" name="menuCode"></ion-input>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item lines="none" size="6" class="border">
                    <ion-label position="stacked">Price</ion-label>
            <ion-input type="text" class="uppercase" [(ngModel)]="data[i].price" name="menuCode"></ion-input>
                </ion-item>
            </ion-col>
        </span>
        <ion-label style="color: black; ">quantity</ion-label>
        <ion-col size="12">
            <div class="add-quatity">
                <ion-button class="removeBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="minusQuantity(i) ">
                   -
                </ion-button>
                <ion-input class="itemCount no-padding" name="quantity" (keypress)="numberOnlyValidation($event)" value="{{data[i].quantity}}"></ion-input>
                <ion-button class="addBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="addQuantity(i) ">
                    +
                </ion-button>
            </div>
        </ion-col>
        <div>
            <ion-button expand="full" color="danger" *ngIf="i >0" (click)="remove(i)">Delete</ion-button>
        </div>
        </div>
    <div>
      <ion-button fill="solid " slot="end" (click)="addMenu() ">Submit</ion-button> 
    </div>
</ion-content>

Answer 4

There are a few issues with your code:

The way you're collecting the data won't work when adding nested rows.
The method name for subtracting quantity is incorrect.
You included
```
[(ngModel)]="data.quantity[i]"
```
unnecessarily since there's no two-way binding in use.

I've made some corrections to your code and noted the changes with comments. You can review them on Stackblitz

import {
  Component
} from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  size = [];
  // Changing the data structure to map nested rows
  data = [{
    weight: 0,
    price: 0,
    quantity: 0
  }]

  constructor() {}

  add() {
    this.size.push('');
  }

  remove(index) {
    this.size.splice(index, 1)
  }

  minusQuantity(i) {
    // Stop reducing quantity below zero
    this.data[i].quantity = this.data[i].quantity != 0 ? this.data[i].quantity - 1 : 0
  }

  addQuantity(i) {
    this.data[i].quantity = this.data[i].quantity + 1
  }
  addMenu() {
    console.log(this.data);
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      My app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
   <div class="p-buttom">
        <ion-button expand="full" color="dark" (click)="add()">Add</ion-button>
    </div>
        <div class="size-bg" *ngFor="let num of size;let i = index">
        <span style="display: flex;">
            <ion-col>
                <ion-item lines="none" size="6" class="border">
                    <ion-label position="stacked">weight</ion-label>
            <ion-input type="text" class="uppercase" [(ngModel)]="data[i].weight" name="menuCode"></ion-input>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item lines="none" size="6" class="border">
                    <ion-label position="stacked">Price</ion-label>
            <ion-input type="text" class="uppercase" [(ngModel)]="data[i].price" name="menuCode"></ion-input>
                </ion-item>
            </ion-col>
        </span>
        <ion-label style="color: black; ">quantity</ion-label>
        <ion-col size="12">
            <div class="add-quatity">
                <ion-button class="removeBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="minusQuantity(i) ">
                   -
                </ion-button>
                <ion-input class="itemCount no-padding" name="quantity" (keypress)="numberOnlyValidation($event)" value="{{data[i].quantity}}"></ion-input>
                <ion-button class="addBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="addQuantity(i) ">
                    +
                </ion-button>
            </div>
        </ion-col>
        <div>
            <ion-button expand="full" color="danger" *ngIf="i >0" (click)="remove(i)">Delete</ion-button>
        </div>
        </div>
    <div>
      <ion-button fill="solid " slot="end" (click)="addMenu() ">Submit</ion-button> 
    </div>
</ion-content>

Calculate the total by subtracting values, then store and send the data in

Answer №1

Answer №2

Similar questions

When attempting to access Firebase Storage with Angular, you may encounter the error message: "TypeError: app.storage

Encountering TS2344 error when referring to the Component Ref in Vue.js during typing operations

Convert parameterized lambdas for success and failure into an observable using RxJS

Challenge encountered with implementing Next-Auth's authorize function in TypeScript

Issue with ng2-charts not rendering properly on the client side when utilized in Angular version 2.0.0-beta-17

Setting up an empty array as a field in Prisma initially will not function as intended

Understanding how to efficiently map through FontAwesome icons using React TypeScript and effectively showcase them on the frontend

Utilizing a created OpenAPI client within a React application

Finding the file path to a module in a NextJS application has proven to be a challenge when utilizing the module

Mastering the proper usage of the import statement - a guide to seamless integration

essential elements for mapping an array using typescript

Apply a spread of nested elements onto another spread

Changing the target in tsconfig.json to "es2022" leads to the error message "Property 'xx' is referenced before its initialization.ts(2729)"

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

Creating QR codes from raw byte data in TypeScript and Angular

Unit testing in Typescript often involves the practice of mocking

The Date object in Typescript is represented as a string

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Creating dynamic HTML with Angular 2 using property binding

Learn the process of automatically copying SMS message codes to input fields in Angular17