我正在构建一个角度应用程序,我需要从输入类型范围中获取值并将它们用于计算并显示结果。 我正在让输入范围值显示在页面的另一部分,但在计算中使用它会返回 NaN,我已经尝试了很多方法,但它返回的是同样的东西。我不知道我做错了什么。 请原谅代码中的一些错误,它正在寻找解决方案。
//The TS File
tbSelector!: number;
newTbSel:any = parseFloat("this.tbSelector");
fVal = (2.5 * this.newTbSel.toFixed(2)) ;
finalValue:number = (this.fVal);
//HTML File.
<div class="d-flex align-items-baseline">
<span class="TB-price">$</span>
<h2 id="TB-price" class="TB-price">
{{ +finalValue }}
</h2>
<span>/TB</span>
</div>
</div>
<div class="d-flex w-100 addone-tb-range justify-content-between">
<form>
<div class="slider align-items-center w-100 align-items-end">
<h2 class="pb-3 addon-range-label">CDN Bandwidth (TB)</h2>
<div class="range">
<input
type="range"
name="TB"
id="date1"
min="1"
max="100"
step="1"
value="1"
width="100%"
#tbSelector
(input)="(tbSelector.value)"
required
/>
<div
class="w-100 mb-3 pt-1 d-flex justify-content-between"
>
<span class="startTB">1</span>
<span class="endTB">100</span>
</div>
<span
class="setTB px-2 py-2 border border-success border-1 rounded"
style="color: #59a52c"
>{{ tbSelector.value }} TB</span
>
</div>
</div>
</form>
</div>
问题就在这里
newTbSel:any = parseFloat("this.tbSelector");
您正在尝试将字符串解析为浮点数,因此结果为 NaN,如果 tbSelector 是数字(在您的定义中)而不是对象,则 tbSelector.value 也是不可能的
我建议使用连接到您的输入的 ngModel 以角度实现一个简单的模板驱动形式,您可以在here.
中找到更多信息你的情况
import {Component} from '@angular/core';
@Component({
selector: 'example-app',
template: `
<input type="number" [(ngModel)]="tbSelector" required>
<p>Value: {{ tbSelector }}</p>
`,
})
export class SimpleNgModelComp {
tbSelector: number = 1;
}
最终答案,希望对您有所帮助
import {Component} from '@angular/core';
@Component({
selector: 'example-app',
template: `
<input type="number" [(ngModel)]="tbSelector" (ngModelChange)="calculate($event)" required>
<p>Value: {{ tbSelector }}</p>
`,
})
export class SimpleNgModelComp {
tbSelector: number = 0;
finalValue: number;
calculate(value: number){
this.finalValue = 2.5 * value;
}
}
我找到了解决问题的方法。
tbSelector: number = 0;
finalValue:number = 0;
cost: number = 2.5;
taxRate: number = 0;
tax: number = 0.00;
subtotal: number = 0;
total: number = 0;
onRangeChange(event: Event) {
let range: HTMLInputElement = <HTMLInputElement>event.target;
this.tbSelector = Number(range.value);
this.subtotal = Number(range.value) * this.cost;
this.tax = this.subtotal * (this.taxRate / 100);
this.total = this.subtotal * (1 + (this.taxRate / 100));
this.finalValue = this.total;
}
HTML:
<input
type="range"
name="TB"
id="date1"
min="1"
max="100"
step="1"
value="1"
width="100%"
#tbSelector
(input)="onRangeChange($event)"
required
/>
<h4 id="TB-price-sidebar">$ {{ finalValue }}</h4>