1

Boa tarde,

Gostaria de uma orientação, estou aprendendo com Ionic e montando um aplicativo, na minha página principal existem o seguinte código:

    <form>

  <ion-card class="cardsIndex" *ngFor="let produto of produtos; let i = index">
    <img src="{{produto.imagem}}"/>
    <ion-card-header class="cardHeader">
      <ion-card-title><b>{{produto.nome}}</b></ion-card-title>
      <ion-label><b>Estoque:</b> {{produto.quantidade}}</ion-label>
    </ion-card-header>
    <ion-card-content class="cardsInputs">
      <ion-button (click)="comprarButton(produto.id)" >Comprar</ion-button>
      <ion-input class="inputHome" type="number" min="0" [(ngModel)]="comprarQtd" name="produto{{i+1}}" placeholder="Quantidade"></ion-input>
    </ion-card-content>
  </ion-card>

</form>

Eu estou consultando um json-server e pegando as informações dos produtos. Cada "Card" possui um campo para a compra e o campo de input que será colocado a quantidade que o usuário deseja comprar. Porém, ao colocar o valor em qualquer dos campos de input, todos eles pegam o mesmo valor.

Na classe de componente desta página, existe a varíavel:

comprarQtd: number;

Eu sei que o que está de errado é que ele está atribuindo para TODOS os campos o mesmo valor que está sendo indicado nessa variável acima. Porém, vocês saberiam me orientar como eu posso atribuir cada valor do Input para a sua determinada variável e ela não atribuir para todos os campos ao mesmo tempo?

Muito Obrigado!

2 Respostas 2

1

Se fosse eu faria diferente, pegaria o valor do input com uma função e setaria o model com aquele valor pego na função, pode ver o exemplo funcionando aqui:

HTML:

<ion-input class="inputHome" type="number" min="0" (input)="Qtd($event.target.value)" 
 placeholder="Quantidade"></ion-input>

TS:

Qtd(valor) {
  this.comprarQtd = valor;
}
2
  • Cara, muito obrigado pela ajuda! Apliquei o seu exemplo e me ajudou perfeitamente no que estava precisando! Muito grato! 7/10/2019 às 20:17
  • Jóia que ajudou man, sucesso!
    – LeAndrade
    7/10/2019 às 20:19
0

Na hora que vc pega seus produtos do seu backend vc tem que adicionar esse campo pra cada produto respectivo.

this.produtosService.pegarProdutos().subscribe(produtosResponse=>{
   this.produtos=produtosResponse.map(produto=>{return {...produto,comprarQtd: 0}}
}

Ai no seu html vc acessa a qntd respectiva aquele produto

[(ngModel)]="produto.comprarQtd"
1
  • Obrigado pela ajuda! Com certeza é uma maneira e me deu ideias! 7/10/2019 às 20:17

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 .