-2

Não tenho muita experiência em Angular e estou com um problema que parece ser simples. Tenho um crud mestre detalhe, e no lançamento do item eu tenho um dropdow de produtos do primeng e apos a seleção eu necessito que ele atualize o campo item.preco baseado na seleção do produto, ou seja o produto.preco. Tentei de diversas formas mas não está indo, não estou usando formulário reativo. Meus inputs estão [(ngModel)].

A parte do código a qual me refiro segue :

          <div class="ui-g-8 ui-sm-12 ui-fluid">
            <label>Item</label>
            <p-dropdown placeholder="Selecione..." [autoWidth]="false"
              [filter]="true"
              [options]="itens"
              [(ngModel)]="comprovante-item.item" name="item"
              (onChange)="carregarItens()"
              (onClick)="selecionouItem()"
              (ngModelChange)="selecionouItem()"
              #item="ngModel" required></p-dropdown>
            </div>
            <div class="ui-g-4 ui-md-3 ui-fluid">
              <label>Afetação IGV</label>

              <p-dropdown placeholder="Selecione..." [autoWidth]="false"
                [filter]="false"
                [options]="tiposAfetacoesIGV"
                [(ngModel)]="comprovante-item.afetacaoIGV" name="afetacaoIGV"
                (onChange)="carregarTiposAfetacoesIGV()"
                [ngModelOptions]="{ updateOn: 'change' }"

                #afetacaoIGV="ngModel" required></p-dropdown>

              <app-message [control]="afetacaoIGV" error="required"
                text="Informe o tipo de afetação IGV"></app-message>
              </div>
        <div class="ui-g-2 ui-sm-2 ui-fluid">
            <label>Quantidade</label>
            <input pInputText type="number" id="quantidade" name="quantidade"  placeholder="0"
              [(ngModel)]="comprovante-item.quantidade" (ngModelChange)="calculaTotalItem()"
              #quantidade/>
        </div>
        <div class="ui-g-4 ui-md-2 ui-fluid">
            <label>Valor Unitario</label>
            <input pInputText readonly type="text" name="valorUnitario" placeholder="0,00"
              currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
              [(ngModel)]="comprovante-item.valorUnitario"
              #valorUnitario="ngModel">
          </div>

        <div class="ui-g-4 ui-md-2 ui-fluid">
          <label>Valor Desconto</label>
          <input pInputText type="text" name="valorDesconto" placeholder="0,00"
            currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
            [(ngModel)]="comprovante-item.valorDesconto" (ngModelChange)="lancouDesconto()"
            #valorDesconto="ngModel">
        </div>

          <div class="ui-g-4 ui-md-2 ui-fluid">
            <label>Valor com IGV</label>
            <input pInputText  readonly type="text" name="comprovante-item.valorIGV" placeholder="0,00"
              currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
              [(ngModel)]="comprovante-item.valorIGV"
              #valorIGV="ngModel">
          </div>
          <div class="ui-g-4 ui-md-2 ui-fluid">
              <label>Valor Total</label>
              <input pInputText  readonly type="text" name="comprovante-item.valorIGV" placeholder="0,00"
                currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }"
                [(ngModel)]="comprovante-item.valorTotal"
                #valorTotal="ngModel">
            </div>

          <div class="ui-g-1 ui-sm-4 ui-fluid">
            <br />
            <button pButton type="button" icon="pi pi-plus"
              (click)="incluirItem()"
              [disabled]="!item.value || !quantidade.value"></button>
          </div>
      </div>

Os métodos que fiz para responderem as açoes foram :

  selecionouItem() {
    this.comprovanteItem.valorUnitario = this.comprovanteItem.item.valorUnitario;
    this.comprovanteItem.tipoAfetacaoIGV = this.comprovanteItem.item.tipoAfetacaoIGV;
    this.comprovanteItem.valorIGV = this.comprovanteItem.item.valorUnitario +
     (this.comprovanteItem.item.valorUnitario * this.comprovanteItem.item.tipoAfetacaoIGV.tipoTributo.aliquota);
    console.log(this.comprovanteItem.valorUnitario);
    console.log('selecionouItem');
  }
  lancouDesconto() {
    this.comprovanteItem.valorIGV = (this.comprovanteItem.item.valorUnitario - this.comprovanteItem.valorDesconto) +
     (this.comprovanteItem.item.valorUnitario * this.comprovanteItem.item.tipoAfetacaoIGV.tipoTributo.aliquota);
     console.log('lancouDesconto');
     this.calculaTotalItem();
  }
  calculaTotalItem() {
    this.comprovanteItem.valorTotal = this.comprovanteItem.valorIGV *
     this.comprovanteItem.quantidade;
     console.log('calculouTotal');

  }

O problema é que preciso ao selecionar o item do dropdown ele atualize o preco do item, ao lancar a quantidade ele atualize o campo de totais e caso haja lancamento de desconto ele atualize os valorIGV e o total. Mas os campos não se atualizam mesmo com os eventos sendo ativados. Espero ter sido claro.

2
  • 1
    É interessante que você coloque pelo menos o código que você já tentou e dê informações sobre a versão do angular que está utilizando também
    – Sorack
    Commented 23/08/2018 às 14:45
  • Ed incrementando o que o Sorack disse, de mais detalhes de qual é seu problema coloque um exemplo aceitável de código pois somente com as informações fornecidas não tem como fazer auxilia-lo. A galera vai negativar sua pergunta pois é mais facil negativar do que explicar como o site funciona da uma lida nesse link: pt.stackoverflow.com/help/dont-ask Commented 23/08/2018 às 14:49

1 Resposta 1

0

Identifiquei o problema: os atributos que utilizavam "-" comprovante-item violam a convenção de nomes. Ele interpreta o "-" como uma subtração. Bastou usar CamelCase comprovanteItem tudo funcionou normalmente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .