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

【问题标题】：Hide 'Zero' value in input using typescript and Angular 2使用打字稿和Angular 2在输入中隐藏“零”值
【发布时间】：2018-07-31 07:18:18
【问题描述】：

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

这里我必须在用户输入值时隐藏零金额。
如果他输入全零，那么只有我们必须隐藏而不是像 20,30,100 等这样的情况......
我正在使用 Angular 2。

【问题讨论】：

在 change 事件上调用一个函数，如果输入的值全为 0，则将 null 修补到该输入
到目前为止你尝试了什么？
@Faisal 尝试了模式，但没有成功
@MohdTabishBaig 我正在使用更改事件，我会告诉你它是否有效
也许你的答案就在这里？ stackoverflow.com/questions/27916185/…

标签： html angular typescript

【解决方案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 中添加了这个 keyUp 事件，并在 .ts 中添加了以下代码

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

}

工作正常

【讨论】：

【解决方案2】：

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

&lt;input (input)="validateNumber($event)"&gt;

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

角度 0 值不显示

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

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

【讨论】：