Question

我有一个输入字段，我想在从网络用户（USD）输入数据时显示正确的货币格式...

对此有一点背景，我使用的先前输入掩码将向后开始（示例：如果用户输入10，而不是显示$ 10，它将显示0.10 ...因此，如果用户想显示$ 100.00，则该用户为此，必须输入1和4个零。）

跳到我现在的位置...我希望能够在输入字段中输入“ 10”，然后以正确的USD货币格式将其实时显示在输入字段中：$ 10.00。

<div class="col-6 col-sm-6 col-md-2 col-lg-1 form-group" *ngIf="configuration.is_item_price_and_total_visible;">
     <mat-form-field floatLabel="never">
       <input matInput type="text" placeholder="Price" [(ngModel)]="selected_item_price | currency:'USD' (ngModelChange)="selected_item_price=$event" name="price">
     </mat-form-field>
</div>

Answer 1

您不能在模板状态器中使用模板表达式运算符（管道，保存导航器）。即[ngModel] =“ selected_item_price | currency：'USD'”

尝试解析输入值属性，例如

<div class="col-6 col-sm-6 col-md-2 col-lg-1 form-group" *ngIf="configuration.is_item_price_and_total_visible;">
      <mat-form-field floatLabel="never">
       <input matInput type="text" placeholder="Price" [value]="selected_item_price| currency:'USD':true:'1.0-2'" [(ngModel)]="selected_item_price" name="price">
      </mat-form-field>
</div>

Answer 2

您需要将绑定分为单向绑定[ngModel]="selected_item_price | currency:'USD'"和事件绑定(ngModelChange)="selected_item_price=$event"，因为管道仅适用于单向绑定。

<mat-form-field floatLabel="never">
  <input matInput type="text" placeholder="Price" [ngModel]="selected_item_price | currency:'USD'" (ngModelChange)="selected_item_price=$event" name="price">
</mat-form-field>

从(blur)="selected_item_price = $event.target.value"删除(keyup)="selected_item_price = $event.target.value"后，您还可以使用selected_item_price和()事件来更新ngModel

带输入文本字段的Angular 4货币管道

2 个答案: