0

Es la primera vez que publico aquí, de antemano doy gracias a las posibles respuestas o ayuda que reciba; mi problema es el siguiente: Tengo un modal con un formulario, dentro del formulario hay una tabla con varias columnas, tres de ellas son "Debe", "Haber" y "Debe + Haber". En cada fila de "debe" y "haber" el usuario introduce valores numéricos y al lado aparece la suma correspondiente de ambas filas en "debe + haber". (Agregué un botón para probar llamando a la función correspondiente) Resulta que no aparece el valor total de la sumatoria, únicamente sale 0 y he probado mil formas de realizar esa simple suma pero no consigo realizarla, siento que quizás es un error de novata pero no logro ver cuál es el fallo. Dejaré a continuación lo que tengo en esa parte:

En modal.component.ts tengo (he inicializado todos esos valores a 0):

sumar(){
this.resultado = this.valordebe + this.valorhaber }

En modal.component.html tengo:

<td>
 <input [(ngModel)]="valordebe" (keypress)="onlyNum($event)" type="number" class="form-control" >
</td>
<td>
  <input [(ngModel)]="valorhaber" (keypress)="onlyNum($event)" type="number" class="form-control" >
</td>
<td>
  <button type="button" class="btn" (click)="sumar()">SUMAR</button>
  <input type="number" class="form-control" value={{resultado}} readonly>
</td>
5
  • Hola Valentina, te doy la bienvenida a la comunidad, esperamos poder ser de ayuda. Te pregunto, si entendí lo que estás tratando de hacer es, una tabla, con nuna sola fila, donde la fila debe sumar el valor de las dos columnas debe + haber?
    – jecorrales
    Commented el 25 nov. 2022 a las 22:12
  • Si es así, por favor revisa el siguiente enlace si realiza según lo que planteas, en caso contrario me lo haces saber
    – jecorrales
    Commented el 25 nov. 2022 a las 22:24
  • 1
    @jecorrales Sii, es exactamente lo que necesito, y de lo forma que lo estoy haciendo no me funciona Commented el 28 nov. 2022 a las 12:30
  • 1
    @jecorrales Siiiii, al principio no se me abría el código, solo el ejecutable directamente, pero ya pude verlo y realizarlo, me funcionó a la perfección, muchísimas gracias. Mi error era que en los {{ }} ponía el resultado, no volvía a realizar la operación de suma, gracias! Commented el 28 nov. 2022 a las 15:55
  • Con gusto, por favor podrías marcar la respuesta como aceptada.
    – jecorrales
    Commented el 28 nov. 2022 a las 15:57

1 respuesta 1

0

Tienes dos formas posibles de hacerlo desde la directiva ngModel de angular. Podrías utilizar una suma automática con los dos valores que requieres sumar:

<table>
  <tr>
    <th>Debe</th>
    <th>Haber</th>
    <th>Debe + Haber</th>
  </tr>
  <!-- SUMA DE VALORES AUTOMÁTICAMENTE -->
  <tr>
    <td>
      <input
        type="number"
        [(ngModel)]="valorDebe"
        name="valorDebe"
        placeholder="Debe (valor)"
      />
    </td>
    <td>
      <input
        type="number"
        [(ngModel)]="valorHaber"
        name="valorHaber"
        placeholder="Haber (valor)"
      />
    </td>
    <td>
      <!-- TOTAL -->
      {{ valorDebe + valorHaber }}
      <!-- SI VAS A SUMAR DOS INPUT DE TIPO TEXT TENDRIAS QUE USAR EL OPERADOR -- PARA SUMAR AMBOS VALORES -->
    </td>
  </tr>
</table>

La siguiente alternativa sería calcular el resultado al momento de ejecutar un evento (click), esto quiere decir que al momento de ingresar el valor para valorDebe + valorHaber se almacena en una tercer variable total al momento de ejecutar el método correspondiente sumarValores():

<table>
  <tr>
    <th>Debe</th>
    <th>Haber</th>
    <th>Debe + Haber</th>
  </tr>
  <!-- SUMAR VALORES POR MEDIO DE UN EVENTO ONCLICK -->
  <tr>
    <td>
      <input
        type="number"
        [(ngModel)]="valorDebe"
        name="valorDebe"
        placeholder="Debe (valor)"
      />
    </td>
    <td>
      <input
        type="number"
        [(ngModel)]="valorHaber"
        name="valorHaber"
        placeholder="Haber (valor)"
      />
    </td>
    <td>
      {{ total }}
    </td>
  </tr>
</table>
<br />
<!-- BUTTON QUE EJECUTA EL METODO DE SUMA DE VALORES -->
<button (click)="sumarValores()">Sumar valores</button>

Para almacenar el valor en un input podrías asignarlo directamente a otra directiva:

<input
      type="number"
      [(ngModel)]="total"
      name="total"
      placeholder="Total (valor)"
    />

Y este sería el ts del componente:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  valorDebe: number = 0;
  valorHaber: number = 0;
  total: number = 0;

  sumarValores() {
    this.total = this.valorDebe + this.valorHaber;
  }
}

STACKBLITZ.COM

En el siguiente enlace puedes ver el ejemplo funcional

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.