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>，但是$符号在输入字段的开头，这不是我想要的。

我要实现的是输入字段应该在前面显示一个带有$符号的数字，并且滑块还具有更改数字的控件。

我的代码没有$符号也可以正常工作。

感谢任何帮助。

Answer 1

以货币表示您的价值的标准方法是使用currency之类的<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

如果货币符号是固定的，即不需要是本地货币且不需要格式化，那么它将始终有效：

@KafkaListener(topics = "some-subscription-id",
        containerFactory = "kafkaListenerContainerFactory")
public void pushMessage(SomeMessage message, Acknowledgment acknowledgment) {
    EmitterProcessor emitter = randomIdMap.get("randomId");
    if (emitter != null ) {
        emitter.onNext(message);
        emitter.onComplete();
        randomIdMap.remove("randomId");
        acknowledgment.acknowledge();
    }
}

Answer 4

您的绑定有误。您需要香蕉装箱绑定[（ngModel）] =“ serial”，而不是[ngModel] =“ serial”

每次输入更改时，绑定中的

（）都会更新串行模型。从输入到模型

如果通过代码手动更改，[[]]仅绑定串行数据。这将导致单向绑定-从模型到输入。

您猜--[[）]它们将进行双向绑定