如何在Ionic 3中创建具有+和-按钮的输入框

Question

如何创建带有+和-按钮的输入框。单击用户可以更改所选产品的数量，例如此屏幕image

我知道这个问题曾经在这里，但是它不是ionic3，并且它的答案不起作用，因为所有值都会增加或减少<-这个问题被添加到那里，但没有一个答案

Answer 1

  

我为您创建了这个，请根据需要修改样式和功能！

     

检查 WORKING STACKBLITZ

您的 //We're taking the userInput and converting it to lowercase letters and storing it within userChoice function getUserChoice(userInput){ let userChoice = userInput.toLowerCase(); if(userChoice === "rock" || userChoice === "paper" || userChoice === "scissors"){return userChoice;} else{return "That hand doesn't exist.";} } //We're making a number and converting it to an eqvivalent string function getComputerChoice(){ let computerChoice = Math.floor(Math.random()*3); if(computerChoice === 0){return "rock";} else if(computerChoice === 1){return "scissors";} else if(computerChoice === 2){return "paper";} else{return "Input not valid.";} } //Determining the winner based upon the input and the computer's choice function determineWinner(userChoice, computerChoice){ //Having a tie if (userChoice === computerChoice){return "It's a tie!";} //If the user types in scissors else if(userChoice === "scissors"){ if(computerChoice === "rock"){return "Computer wins! Rock kills scissors.";} else if(computerChoice ==="paper"){return "User wins! Scissors kill paper.";} } //If the user types in paper else if(userChoice === "paper"){ if(computerChoice === "rock"){return "User wins! Paper kills rock.";} else if(computerChoice === "scissors"){return "Computer wins! Scissors kill paper.";} } //If the user types in rock else if(userChoice === "rock"){ if(computerChoice === "paper"){return "Computer wins! Paper kills rock.";} else if(computerChoice === "scissors"){return "User wins! Rock kills scissors."}; } } //Function that embodies the other functions and executes the game. function playGame(){ console.log(`You chose ${userChoice}`); } playGame(); 可能类似于

component.ts

和您的 constructor() { this.shop = this.shop.map(food => { food['qty'] = 0; return food; }); } incrementQty(index: number) { this.shop[index].qty += 1; } decrementQty(index: number) { this.shop[index].qty -= 1; } 如下所示

component.html

希望这会有所帮助！编码愉快