Question

我有一个我正在构建的页面，其目标是每个问题都有一个总输入

示例

group1A   = 3
group1B   = 5
... etc..
group1Total = 8  (calculate on function call of each input or observable...

HTML Angular code

<div class="col-xs-12" style="border:1px solid black; padding:10px">
  <div><strong>Group 1</strong></div>
  <div class="form-inline">
    <label>1. Are you Prone to Infection, colds, coughs, or flu ?.............................. </label>
    <input id="group1A" [(ngModel)]="group1A" name="group1A" style="width: 40px;" type="text" class="form-control" placeholder="">
  </div>
  <div class="form-inline">
    <label for="group1B">2. Do you have inflammation, Heat spots ?................................................. </label>
    <input id="group1B" [(ngModel)]="group1B" name="group1B" style="width: 40px;" type="text" class="form-control" placeholder="">
  </div>
  <div class="form-inline">
    <label for="group1C">3. Do you have specific pain ? ( printed, then list on Back)................... </label>
    <input id="group1C" [(ngModel)]="group1C" name="group1C" style="width: 40px;" type="text" class="form-control" placeholder="">
  </div>
  <div class="form-inline">
    <label for="group1D">4. Do you have swelling?..................................................................................... </label>
    <input id="group1D" [(ngModel)]="group1D" name="group1D" style="width: 40px;" type="text" class="form-control" placeholder="">
  </div>
  <div class="form-inline">
    <label for="group1E">5. Do you have pus, open sores, skin problems, mucus formation ?</label>
    <input id="group1E" [(ngModel)]="group1E" name="group1E" style="width: 40px;" type="text" class="form-control" placeholder="">
  </div>
  <div class="form-inline">
      <strong>Group 1  Total = {{group1A + group1B}}</strong>..................................................................................................... <input type="text" class="form-control" style="width: 50px;" id="group1" name="group1"> 
 </div>
</div>

我继续看到Typescript的BAD示例而不是总和它将其视为字符串而不是＆＃34; 8＆＃34;我会看到＆＃34; 35＆＃34;

我不想要的所有javascript和jquery东西，因为这是Angular5 / Typescript。

我更愿意遍历每个＆＃34;组＆＃34;因为我将有10到20个小组，其中每个小组我都命名

group1A到group1E，总输入为group1Total 然后说 group2A到group2E，总输入为group2Total

这种代码不起作用......

 <p>first number:<input type="number" [(ngModel)]='a'></p>
 <p>second number:<input type ="number" [(ngModel)]='b'></p>
 <h1>{{a + b}}</h1>

 export class AppComponent 
 { 
   a: number = 0; //set default value as 0
   b: number = 0;

 }

Answer 1

您可以使用类似这样的vanilla javascript轻松地将字符串转换为数字：

{{Number(a) + Number(b)}}

Angular Typescript添加输入文本框号的总和组

1 个答案: