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.
angular
que está utilizando também