html - 如何在页面加载时默认获取Angular(TypeScript)中文本框的国际货币格式
问题描述
如果我更改页面中的某些内容并单击页面中的某个位置,我将获取文本框的货币格式,但我需要在默认页面加载时获取该格式(我尝试通过在 ngOnInit 中写入它不起作用)。
我尝试了所有方法,但没有任何效果,我在 js 中尝试过也没有效果。我对 Angular 和 TypeScript 很陌生。
这是 HTML 代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="center">
<div class="container">
<div class="col-sm-4 col-sm-offset-3 well offset4 form-v-middle">
<div class="form-group">
<label for="text">What's Your Client's totel Budget?</label> <br>
<input type="text" class="form-control "class="border-bottom" id="field1"
[(ngModel)]="budget">
</div>
<div class="form-group">
<label for="text">How would you like to allocate your Budget?</label> <br>
<div class="row">
<div class="col">
<label for="text" >Linear </label>
</div>
<div class="col">
<input type="text" class="form-control" class="border-bottom"value="Linearpercentage"
[(ngModel)]="Linearpercentage" (blur)="onBlurMethod($event)" />%
</div>
<div class="col">
<input type="text" class="form-control" class="border-bottom" [(ngModel)]="Linearbudget"
(change)="somethingChanged($event)"(blur)="onBlurMethod($event)" >
</div>
</div>
<div class="row">
<div class="col">
<label for="number" >Digital</label>
</div>
<div class="col">
<input type="text" class="form-control" class="border-bottom" value="Digitalpercentage"
[(ngModel)]="Digitalpercentage" (blur)="onBlurMethod($event)" />%
</div>
<div class="col">
<input type="text" class="form-control" class="border-bottom" [(ngModel)]="Digitalbudget"
(change)="somethingChanged($event)" (blur)="onBlurMethod($event)">
</div>
</div>
<div class="row ">
<div class="col">
<label for="number" >H/V</label>
</div>
<div class="col">
<input type="text" class="form-control" class="border-bottom" value="subtractedValue"
[(ngModel)]="subtractedValue" (blur)="onBlurMethod($event)" [disabled]="true"/>%
</div>
<div class="col">
<input type="text" class="form-control" class="border-bottom" [(ngModel)]="percentageSub" [disabled]="true"
(change)="somethingChanged($event)" (blur)="onBlurMethod($event)">
</div>
</div>
</div>
</div>
</div>
</div>
这是我的打字稿代码
import { Component, OnInit } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
budget:any;
Linearbudget:any;
Digitalbudget:any;
subtractedValue:any;
percentageSub:any;
Linearpercentage:any;
Digitalpercentage:any;
constructor(private currencypipe:CurrencyPipe){
}
onBlurMethod(element)
{
this.Linearpercentage=Math.round(this.Linearpercentage);
this.Digitalpercentage=Math.round(this.Digitalpercentage);
this.Linearbudget=Math.round(this.Linearbudget);
this.Digitalbudget=Math.round(this.Digitalbudget);
this.percentageSub=Math.round(this.percentageSub);
this.subtractedValue=Math.round(this.subtractedValue);
var sum=this.Linearpercentage+this.Digitalpercentage;
this.Linearbudget=((this.Linearpercentage/100)*this.budget);
this.Digitalbudget=((this.Digitalpercentage/100)*this.budget);
if(sum==100)
{
this.subtractedValue=0;
}
else{
this.subtractedValue=100-(this.Digitalpercentage+this.Linearpercentage);
this.percentageSub=this.budget-(this.Linearbudget+this.Digitalbudget);
this.Linearpercentage=Math.round(this.Linearpercentage);
this.Digitalpercentage=Math.round(this.Digitalpercentage);
this.percentageSub=Math.round(this.percentageSub);
this.subtractedValue=Math.round(this.subtractedValue);
if(this.percentageSub<0 || this.subtractedValue<0)
{
alert('please enter the valid input');
this.percentageSub=0;
this.subtractedValue=0;
}
}
this.Linearbudget=this.currencypipe.transform(this.Linearbudget,'$');
element.target.value=this.Linearbudget;
this.Digitalbudget=this.currencypipe.transform(this.Digitalbudget,'$');
element.target.value=this.Digitalbudget;
this.budget=this.currencypipe.transform(this.budget,'$');
element.target.value=this.budget;
this.subtractedValue=this.currencypipe.transform(this.subtractedValue,'$');
element.target.value=this.subtractedValue
}
somethingChanged(element)
{
this.Linearpercentage=Math.round(this.Linearpercentage);
this.Digitalpercentage=Math.round(this.Digitalpercentage);
this.Linearbudget=Math.round(this.Linearbudget);
this.Digitalbudget=Math.round(this.Digitalbudget);
this.percentageSub=Math.round(this.percentageSub);
this.subtractedValue=Math.round(this.subtractedValue);
this.Linearpercentage=(this.Linearbudget/this.budget)*100;
this.Digitalpercentage=(this.Digitalbudget/this.budget)*100;
var sum1=this.Linearbudget+this.Digitalbudget;
if(sum1==this.budget)
{
this.percentageSub=0;
}
else{
this.subtractedValue=100-(this.Digitalpercentage+this.Linearpercentage);
this.percentageSub=(this.subtractedValue/100)*this.budget;
this.Linearpercentage=Math.round(this.Linearpercentage);
this.Digitalpercentage=Math.round(this.Digitalpercentage);
this.percentageSub=Math.round(this.percentageSub);
this.subtractedValue=Math.round(this.subtractedValue);
if(this.percentageSub<0 || this.subtractedValue<0)
{
alert('please enter the valid input');
this.percentageSub=0;
this.subtractedValue=0;
}
this.Linearbudget=this.currencypipe.transform(this.Linearbudget,'$');
element.target.value=this.Linearbudget;
this.Digitalbudget=this.currencypipe.transform(this.Digitalbudget,'$');
element.target.value=this.Digitalbudget;
this.budget=this.currencypipe.transform(this.budget,'$');
element.target.value=this.budget;
this.subtractedValue=this.currencypipe.transform(this.subtractedValue,'$');
element.target.value=this.subtractedValue
}
}
ngOnInit(element){
this.Linearpercentage = 30;
this.Digitalpercentage = 70;
this.budget=10000;
this.subtractedValue=0;
this.Linearbudget=3000;
this.Digitalbudget=7000 ;
this.percentageSub=0;
this.Linearbudget=this.currencypipe.transform(this.Linearbudget,'$');
element.target.value=this.Linearbudget;
this.Digitalbudget=this.currencypipe.transform(this.Digitalbudget,'$');
element.target.value=this.Digitalbudget;
this.budget=this.currencypipe.transform(this.budget,'$');
element.target.value=this.budget;
this.subtractedValue=this.currencypipe.transform(this.subtractedValue,'$');
element.target.value=this.subtractedValue
}
}
解决方案
推荐阅读
- swift - UIScrollViewDelegate 方法仅在视图初始化时调用
- python - 具有多列的命名聚合
- sql - 如何使用 postgresql 查找重复记录和更新?
- php - CakePhp 限制文件夹上传
- ada - 为什么 Ada 不捕获这个指定的范围检查?
- flask - Flask 将变量作为带引号的文本返回,而不是作为 html 元素
- awk - 如何将多行输出转换为 csv(通过 awk/sed Magic)?
- regex - 如何防止它接受每边一个空格的一个字母(一个字母单词)?
- html - 谷歌脚本,html用户表单,从html用户表单获取数据
- r - 获取多个变量和多个组的基本统计数据