Angular 5-如何在輸入字段中添加$符號

Question

我有一個數量選擇器組件，可用於在輸入字段中輸入數量，並使用滑塊選擇數量。

像這樣

和代碼

<div class="row clearfix consumer-slider">
  <div class="half-width">
    <div class="col-left row clearfix rel inlined-label flex">
      <label class=" half-width slider-label inline accent-color">{{ label }}</label>
      <mat-input-container class=" half-width inline slider-inputs">
        <input matInput name="amountRequired" [min]="minAmount"  type="text"  [max]="maxAmount" placeholder=""  (change)="changeAmountValue()" [(ngModel)]="amount">
      </mat-input-container>
    </div>
  </div>
  <div class="half-width">
    <div class="col-right">
      <div class="row clearfix rel">
        <!-- range slider for amount required -->
        <mat-slider class="full-width" [min]="minAmount" [max]="maxAmount" step="{{step}}" [(ngModel)]="amount" thumbLabel (change)="updateAmountValue($event)"></mat-slider>

        <p class="min-amount small">{{minAmount | customCurrency}}</p>
        <p class="max-amount small">{{maxAmount | customCurrency}}</p>
      </div>
    </div>
  </div>
</div>

我想問的問題是如何在數字前添加$符號。

我試圖添加<span matPrefix>$ &nbsp;</span> ，但是$符號在輸入<span matPrefix>$ &nbsp;</span>的開頭，這不是我想要的。

我想要實現的是輸入字段應在前面顯示一個帶有$符號的數字，並且滑塊還具有更改數字的控件。

沒有$符號，我的代碼運行正常。

感謝任何幫助。

Answer 1

用貨幣表示您的價值的標准方法是使用currency管道，例如<span>{{myValue | currency }} </span> <span>{{myValue | currency }} </span>

Answer 2

我認為這更多是HTML CSS問題。 由於您在輸入字段上，因此不幸的是，它不會注冊諸如:: before或after這樣的偽元素，否則將很容易。 就像使用密碼顯示按鈕或眼睛圖標的輸入一樣，您將需要一個包裝器和兩個元素：

<div class="input-wrapper">
  <span class="input-currency">$</span>
 <input type="number" name="amount" />
</div>

而對於您的CSS

.input-wrapper {
  position: relative;
}
.input-currency {
  position: absolute;
  left: 10px;
  top: calc(100% - 1.35em);
  line-height: 1em;
  font-size: 1em;
}

.input-wrapper > input {
  padding-left: 16px;
  font-size: 1em;
}

從本質上來說，這將滿足您的需求。 對齊是針對另一個主題的，但重要的是包裝器具有相對位置，貨幣或跨度具有絕對位置，並且輸入中的左填充略大於跨度的左側位置。

希望能幫助到你

Answer 3

如果貨幣符號是固定的，即不需要在本地並且不需要格式化，那么它將始終有效：

   <p class="min-amount small">${{minAmount}}</p>

Answer 4

您的綁定有誤。 您需要香蕉裝箱綁定[（ngModel）] =“ serial”，而不是[ngModel] =“ serial”

綁定中的（）會在每次輸入更改時更新串行模型。 從輸入到模型

如果通過代碼手動更改，則[[]僅綁定串行數據。 這將導致單向綁定-從模型到輸入。

如您所料-[[）]它們將進行雙向綁定