typescript 将字符串输入解析为角2的数字

polhcujo 于 2023-03-09 发布在 TypeScript

关注(0)|答案(1)|浏览(150)

我正在构建一个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>

typescript

来源：https://stackoverflow.com/questions/75672898/parsing-a-string-input-into-a-number-in-angular-2

1条答案

按热度按时间

db2dz4w81#

问题就在这里

newTbSel:any = parseFloat("this.tbSelector");

您试图将字符串解析为浮点数，因此结果为NaN，也就是tbSelector。如果tbSelector是数字（在您的定义中）而不是对象，则不可能有value
我建议实现一个简单的模板驱动形式的Angular 与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;
}

赞(0）回复(0）举报 2023-03-09

我来回答

typescript 将字符串输入解析为角2的数字

1条答案

相关问题

热门标签

最新问答