load上的Run方法-角度4
load上的Run方法-角度4
提问于 2018-06-05 05:17:40
我有一个用户表单，它接受使用Angular的currency管道转换为货币的输入值。请查看下面的代码片段。
app.component.html
<input type="text" [(ngModel)]="value" (blur)="transformAmount($event)" (focus)="transformAmount($event)" required pattern="[0-9]+" class="form-control" id="saleAmount" formControlName="SaleAmount">app.component.ts
export class QuoteInformationComponent implements OnInit {
formattedAmount: string = '0';
value: any;
transformAmount(element) {
try {
if (typeof (element.target.value) !== 'number')
this.formattedAmount = this.currencyPipe.transform(this.value, 'USD', true, '1.2-2');
element.target.value = this.formattedAmount;
} catch (e) {
console.log(e);
}
}}
当用户输入值时，它会按照预期行为将数值更改为货币金额。但是当我重新加载项目时，显示的不是货币值。它显示为一个整数。
有没有办法在加载或填充输入表单值时运行此方法？
我还在学习后端开发，并且对angular 4还很陌生。
任何帮助都非常感谢，谢谢！
回答 1
Stack Overflow用户
发布于 2018-06-05 06:15:24
通过在ngOnInit生命周期挂钩内调用该函数，在组件的初始化上运行该函数。您需要有一个对元素的引用才能从模板外部调用它，因此通过在模板上添加一个viewchild引用来使其成为viewchild，
e.g
<input #myNumberInput type="text" [(ngModel)]="value" (blur)="transformAmount($event)" (focus)="transformAmount($event)" required pattern="[0-9]+" class="form-control" id="saleAmount" formControlName="SaleAmount">
@ViewChild('myNumberInput') myNumberInput: ElementRef;其中#myNumberInput是添加的引用。然后，您可以在组件加载时运行。
ngOnInit() {
this.transformAmount(this.myNumberInput.nativeElement.value);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50688904
复制相关文章
相似问题
腾讯云开发者
