提问人：Ariyo Joey 提问时间：3/8/2023 最后编辑：Ariyo Joey 更新时间：3/20/2023 访问量：295
在 Angular 2 中将字符串输入解析为数字
parsing a string input into a number in angular 2
问：
我正在构建一个 angular 应用程序，我需要从输入类型范围中获取值并在计算中使用它们并显示结果。 我正在获取要在页面的另一部分显示的输入范围值，但是在计算中使用它返回 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>
答：
0赞
Gone
3/8/2023
#1
问题就在这里
newTbSel:any = parseFloat("this.tbSelector");
您正在努力将字符串解析为浮点数，因此结果是 NaN，如果 tbSelector 是一个数字（在您的定义中）而不是对象，则 tbSelector.value 也是不可能的
我建议在 angular 中实现一个简单的模板驱动表单，并将 ngModel 连接到您的输入，您可以在此处找到更多信息。
就您而言
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;
}
}
评论
0赞
Ariyo Joey
3/8/2023
tbSelector 显示输入范围的值。我想在计算中使用该值并显示结果。输入范围值是开箱即用的字符串，因此存在问题。我需要将值解析为一个数字，然后在计算中使用它，但我不知道为什么我无法做到。
0赞
Gone
3/8/2023
范围值必须是一个数字（正如您用类型描述的那样），对于 calc，您可以使用一个名为 where in function 的特定 ngModel 输出，您将当前值作为第一个参数，然后您可以将所需的计算结果分配给另一个变量(ngModelChange)="calculate($event)"calculate
0赞
Ariyo Joey
3/8/2023
我想出了这个，但它仍然显示 NaN，但是当我控制台日志类型时，它显示数字。tbSelector！： 字符串;finalValue！：数字;onRangeChange（） { this.finalValue = parseFloat（this.tbSelector） * 2.5; console.log（typeof this.finalValue） }
0赞
Gone
3/8/2023
那是因为 javascript 中的 NaN 是一个数字。这是错误的：因为你传递一个字符串来解析浮点数而不是变量，如果你把它传递到类中而没有给它分配一个数值，也是错误的，因为等于 所以是一个 NaN。parseFloat("this.tbSelector");parseFloat(this.tbSelector);parseFloat(undefined);
0赞
Gone
3/9/2023
我已经更新了响应，试试这个
0赞
Ariyo Joey
3/13/2023
#2
我找到了解决问题的方法。我将直接从输入范围获取的输入声明为数字，并在计算中使用它之前初始化其值。这有助于不将该值视为 NaN。
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>
评论