角度模板文字：将字符串转换为数字后添加成为连接

Question

我正在研究基于Angular 4的计费应用程序。我必须对我应用的逻辑进行更改。但是当我做出改变时，一切都被打破了。我进行了深入检查，发现将模板中的String转换为Integer后的Addition只是连接。

这是普通的JavaScript，

100 + +"28" 

将是128

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

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

我试过这三种方式

{{100 + +"28"}}

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

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

但是这两次都产生了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的价格。也就是说，如果产品的价格是INR 100.00，GST是28％，那么它的实际价格是78.13印度卢比，而消费税是21.87印度卢比。客户端将只输入100.我必须计算其他2个值并将其打印在Bill中。

Answer 1

从我只能假设......

i.gst是数据中的字符串，这意味着您需要在控制器/组件上使用其他方法将其转换为整数或浮点数。

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

//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 {}