我有一个量的选取器组件使用,进入输入字段和金额滑块来量。
和代码
<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>$ </span>
,但是$符号是在提交的输入,这是不是我想要什么的开始。
我想实现的是输入字段应与前一个$符号显示的号码,滑块还必须更改的数量控制。
我的代码是工作的罚款没有$符号。
感谢所有帮助。
代表货币你的价值的标准方法是使用currency
管像<span>{{myValue | currency }} </span>
我认为这更多的是一个HTML CSS问题。既然你是在输入栏上,遗憾的是它不注册伪元素,如::之前或之后将做这一件轻而易举的事。就像使用密码输入显示的按钮或眼睛图标,你需要的包装和两个元素:
<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;
}
这将从根本上实现你在找什么。对齐是另一个话题,但最重要的是,你的包装有一个位置相对,货币或跨距的位置绝对和您的输入左填充比你跨度的左侧位置,更大一点。
希望能帮助到你
如果货币符号是固定的,即无需在本地,没有必要进行格式化,那么这将始终工作:
<p class="min-amount small">${{minAmount}}</p>
你已经错了约束。您需要香蕉在框结合[(ngModel)] =“串行”,而不是[ngModel] =“串行”
()中的结合将更新串行模型每次当输入将是变化。从输入到模型
单[]将只结合串行的数据,如果它将由代码手动更改。这将导致单向绑定 - 从模型到输入。
正如你猜想 - 一起[()],他们将双向绑定