计算不按角度工作的三个场的总数

Question

实际上我有三个字段，我需要在最后的总输入字段中显示这些字段的总和。我已经尝试了我的方法，这三个字段的值出现在控制台中，但未显示总计。我遇到的问题是什么，我无法确定是什么问题？

我的逻辑：

@Component({
  selector: 'app-pre-assestment',
  templateUrl: './pre-assestment.component.html',
  styleUrls: ['./pre-assestment.component.css']
})
export class PreAssestmentComponent implements OnInit {

    one:number;
    two:number;
    three:number;

    total:number;

public currentstatus: any;


 beforeAddClicked=false;*/
selections: Observable<Selection[]>;


preAssessment: PreAssesstment = new PreAssesstment();
  submitted = false;

  constructor(private selectionService: SelectionService,private preassessmentService:PreAssessmentService,private authService:LoginAuthService) {
      this.authService.isLoggedIn();
   }

  ngOnInit() {

  this.total=this.Ontotal();
  }

  onSearchChange(searchValue : number ) {
 this.one=searchValue;
 console.log(this.one);
 return this.one;  
  }

  onSearchChange1(searchValue : number ) {
 this.two=searchValue;
 console.log(this.two);
 return this.two;  
  }

  onSearchChange2(searchValue : number ) {
 this.three=searchValue;
 console.log(this.three);
 return this.three;  
  }

 Ontotal(){
   console.log(this.one+this.two+this.three);
   return this.one+this.two+this.three;
 }

}

要显示的html文件

<div class="col-md-1"> 
   <label>Customs</label>
</div>
<div class="col-md-6">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customReason" name="customReason" (input)="onSearchChange($event.target.value)">
</div>
<div class="col-md-2">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customAmount" name="customAmount" (input)="onSearchChange1($event.target.value)">
</div>
<div class="col-md-2">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customPenalty" name="customPenalty" (input)="onSearchChange2($event.target.value)">
</div>
<div class="col-md-1">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customTotal" name="customTotal" value="{{total}}">
</div>

我的表单如下：

Answer 1

首先，当您将模型定义为PreAssestment时，不需要其他3个变量，对计算使用相同的模型，

此外，您还需要使用+将字符串转换为整数，请按以下步骤找到要使用的干净代码，

export class AppComponent {
   preAssessment: PreAssesstment = new PreAssesstment();
  constructor() {

   }

  ngOnInit() {
    this.preAssessment.customAmount = 0;
    this.preAssessment.customTotal = 0;
    this.preAssessment.customPenalty = 0;

  }

  onSearchChange(searchValue : number ) {    
  }

  onSearchChange1(searchValue : number ) {
     this.preAssessment.customTotal = this.preAssessment.customAmount + this.preAssessment.customPenalty;
  }

  onSearchChange2(searchValue : number ) {
     this.preAssessment.customTotal = +this.preAssessment.customAmount + +this.preAssessment.customPenalty;
  }
}


export class PreAssesstment {
  customAmount: number;
  customPenalty: number;
  customTotal: number;
  body: string;
}

STACBKLITZ DEMO

Answer 2

您的代码永远不会告诉total进行更新。最简单的解决方案是

this.total = this.Ontotal();

在每个onSearchChange函数的末尾，在返回之前。

更新-它们被视为字符串。将您的Ontotal（）函数更改为：

Ontotal(){
   console.log(this.one+this.two+this.three);
   return +this.one + +this.two + +this.three;
}

（请注意计算开头的+）