javascript - Angular 模板文字 : Addition after converting string to number becoming just concatenation

Question

我正在开发一个基于 Angular 4 的计费应用程序。我必须对我所应用的逻辑进行更改。但当我做出改变时，一切都被打破了。我深入检查发现模板内将字符串转换为整数后的加法变成了串联。

这是在普通的 JavaScript 中，

100 + +"28" 

将是128

console.log(100 + +"28");

但在 Angular 模板文字中，它变成 10028

我尝试了这3种方式

{{100 + +"28"}}

{{100 + (+"28")}}

{{(100 + (+"28"))}}

但是都是 3 次，结果是 10028。

我无法将其存储在变量中并显示，因为我正在使用 ngFor。

我的原始代码中的 MCVE 是

<div class="row bill-entry" data-id="" *ngFor="let i of item">
  <div class="col-md-4 col-sm-4 col-lg-4">
    {{i.itemName}}
  </div>
  <div class="col-md-2 col-sm-2 col-lg-2">
    {{i.qty}}
  </div>
  <div class="col-md-3 col-sm-3 col-lg-3">
    <div class="row price">
      <div class="col-md-4 col-sm-4 col-lg-4">
        <div class="over-price">{{ (((i.qty * i.ind_price) / (100 + (+i.gst))) * 100).toFixed(2) }}
                                                             ^^^^^^^^^^^^^^^^^^  -> Problem
        </div>
      </div>
    </div>
  </div>
</div>

这是一个minimal plunker我在其中重现了这个问题

<小时/>

注意:

GST 是印度的商品及服务税。产品的最终价格包含消费税。客户将输入最终价格。该应用程序应该找到不含 GST 和 GST 的价格。也就是说，如果产品的价格为 INR 100.00，GST 为 28%，那么它的实际价格为 INR 78.13，GST 为 INR 21.87。客户只输入 100。我必须计算其他 2 个值并将其打印在 Bill 中。

Answer 1

据我所知...

i.gst 是数据中的一个字符串，这意味着您需要在 Controller /组件上使用额外的方法将其转换为整数或 float 。

我已经拿走了你的插件并添加了一个数据属性和相应的方法来转换它

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 *ngFor="let i of data">Hello {{100+getNumber(i.gst)}}</h2>
      <h2>Hello {{100+ (+"28")}}</h2>
      <h2>Hello {{(100+ (+"28"))}}</h2>
    </div>
  `,
})
export class App {
  name:string;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  // data array
  data = [
    {gst: "28"},
    {gst: "32"}
  ];

  // method to convert string to float
  getNumber(string) {
    return parseFloat(string);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}