使用打字稿和Angular 2在输入中隐藏“零”值

Question

<input type="text" class="form-control"
                   id="transactionAmount"
                   maxlength="10"
                   OnlyNumber="true" 
                   [(ngModel)]="userBalance.transactionAmount" 
                   name="transactionAmount"
                   placeholder="Amount"
                   required
                   #transactionAmount="ngModel">

1. 在这里，用户输入值时我必须隐藏零金额。
2. 如果他输入全零，那么只有在20,30,100等情况下我们才可以隐藏...
3. 我正在使用Angular2。

Answer 1

<input type="text" class="form-control"
               id="transactionAmount"
               maxlength="10"
               OnlyNumber="true" 
               [(ngModel)]="userBalance.transactionAmount" 
               name="transactionAmount"
               placeholder="Amount"
               required
               #transactionAmount="ngModel"
               (keyup)="hideZero()>

  

在HTML和 .ts 中在代码中添加了此 keyUp 事件

hideZero(){
if(this.userBalance.transactionAmount === '0' ){
    this.userBalance.transactionAmount = '';
}

}

绝对正常

Answer 2

尝试使用（ngModelChange）事件，该事件将在用户键入值时触发。通过使用正则表达式，您可以删除最后一个零值并更新DOM。希望这会有所帮助。

Answer 3

/* In your ts */
validateNumber(value: String) {
 userBalance.transactionAmount = value && value.replace(/(?:0*)(\d*)/g, (_,value1) => {
 return value1;
})
}

<input (input)="validateNumber($event)">

Answer 4

角度0值不显示

<span *ngIf="!pro.model === '0'">{{ pro.model }}</span>

像这样， 当模型值为零时，该时间不显示模型值。 如果模型值不为零，则该时间在html页面中显示模型值。