0

tengo que obtener el precio total cuando ingreso la cantidad, el precio unitario ya lo estoy obteniendo a través del consumo de un servicio. La interfaz está así: introducir la descripción de la imagen aquí

Como ven, debería tener un evento change que cuando ingrese la cantidad en este caso 5 automaticamente me devuelva el Precio Total. Espero alguien pueda ayudarme. Para el código js estoy utilizando TypeScript y el proyecto lo estoy realizando con angular. El codigo de la tabla lo tengo así:

<ng-template #template>


  <div class="modal-header zoom">
    <h4 class="modal-title pull-left">{{'extras.registrar_OC' | translate}}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>


  <div class="modal-body zoom">
    <form>
      <div class="form-group row">
        <label style="color:  #004db0;font-size: 15px;" for="inputPassword4" class="col-md-5 col-form-label mr-0">Codigo
          Producto</label>
        <div class="col-md-7">
          <select class="form-control" #codProducto="ngModel" [(ngModel)]="headerOrdenCompraModal.codProducto"
            name="codProducto" #matnr (change)="onChangeCodigoDescripcionOC(matnr.value)">
            <option *ngFor="let claseProducto of producto" [value]="claseProducto.matnr">{{claseProducto.matnr}}
            </option>
            <!---{{claseProducto.maktx}}-->
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label style="color:  #004db0;font-size: 15px;" for="inputEmail4"
          class="col-md-5 col-form-label mr-0">Descripción</label>
        <div class="col-md-7">
          <input type="text" class="form-control" class="form-control" #descripcion="ngModel"
            [(ngModel)]="headerOrdenCompraModal.descripcion" name="descripcion" disabled>
        </div>
      </div>
      <div class="form-group row">
        <label style="color:  #004db0;font-size: 15px;" for="inputEmail4" class=" col-md-5 col-form-label mr-0">Centro</label>
        <div class="col-md-7">
          <select class="form-control" class="form-control" #centro="ngModel"
            [(ngModel)]="headerOrdenCompraModal.centro" name="centro">
            <option *ngFor="let claseCentro of centros" [value]="claseCentro.werks">{{claseCentro.werks}} - {{claseCentro.name1}}</option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label style="color:  #004db0;font-size: 15px;" for="inputEmail4" class=" col-md-5 col-form-label mr-0">Cantidad</label>
        <div class="col-md-7">
          <input type="text" class="form-control" class="form-control" #cantidad="ngModel"
            [(ngModel)]="headerOrdenCompraModal.cantidad" name="cantidad">
        </div>
      </div>
      <div class="form-group row">
        <label style="color:  #004db0;font-size: 15px;" for="inputEmail4" class=" col-md-5 col-form-label mr-0">Precio Unitario</label>
        <div class="col-md-7">
          <input type="text" class="form-control" class="form-control" #precioUnitario="ngModel"
            [(ngModel)]="headerOrdenCompraModal.precioUnitario" name="precioUnitario" disabled>
        </div>
      </div>
      <div class="form-group row">
        <label style="color:  #004db0;font-size: 15px;" for="inputEmail4" class=" col-md-5 col-form-label mr-0">Precio Total</label>
        <div class="col-md-7">
          <input type="text" class="form-control" class="form-control" #precioTotal="ngModel"
            [(ngModel)]="headerOrdenCompraModal.precioTotal" name="precioTotal" disabled>
        </div>
      </div>
      <div class="btnPos">
        <button type="button" title="Registrar" class="btn" (click)="onRegistrar($event)">
          <i class="simple-icon-check icon"></i>
          <h3 class="exec">Ejecutar</h3>
        </button>
      </div>
    </form>
  </div>
</ng-template>

Espero puedan ayudarme, GRACIAS!

4
  • El código va como texto por favor
    – user128299
    Commented el 4 feb. 2021 a las 21:04
  • Hola BetaM, soy nuevo. Cómo hago eso? Commented el 4 feb. 2021 a las 21:06
  • Copialo y pégalo como texto, posterior lo seleccionas y presionas el ícono de {} o presionas ctrl + k para darle formato, lee aqui Cómo preguntar
    – user128299
    Commented el 4 feb. 2021 a las 21:07
  • Gracias amigo, ya lo actualicé Commented el 4 feb. 2021 a las 21:13

1 respuesta 1

1

Hay mucho código espaguetti aquí, para que tengas control de tu aplicación te recomendaría dejes de usar ngModel Y pases a usar Formularios reactivos eso te dará más control de tu HTML. Ahora con respecto a lo que preguntas, te recomendaría agregar esta instrucción al input de Cantidad (keyup)="calculate()" para que te quede así

  <div class="form-group row">
    <label style="color:  #004db0;font-size: 15px;" for="inputEmail4" class=" col-md-5 col-form-label mr-0">Cantidad</label>
    <div class="col-md-7">
      <input type="text" class="form-control" class="form-control" (keyup)="calculate()" #cantidad="ngModel"
        [(ngModel)]="headerOrdenCompraModal.cantidad" name="cantidad">
    </div>
  </div>

Ahora en el archivo de lógica ( por lo general lleva un nombre similar a esto modal-precio.component.ts ) deberás agregar la función que escribimos en el keyup

calculate(): void {
  const base     = this.headerOrdenCompraModal;
  const cantidad = Number(base.cantidad );
  const precio   = Number( base.precioUnitario );
  const total    = cantidad * precio;
  base.precioTotal = total;
}

Con eso deberías poder obtener el resultado que estás esperando

2
  • Muchas gracias Alberto, me funcionó a la perfección. Commented el 5 feb. 2021 a las 18:22
  • Si te funcionó, recuerda marcala como correcta, dando clic en el la palomita. Esto sirve para que otros desarrolladores con el mismo problema puedan guiarse. Commented el 5 feb. 2021 a las 21:07

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.