加载时运行方法 - Angular 4答案

【问题标题】：Run method on load - Angular 4加载时运行方法 - Angular 4
【发布时间】：2018-06-04 21:17:39
【问题描述】：

我有一个用户表单，它使用 Angular 的货币管道将输入值转换为货币。请查看下面代码的sn-p。

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 还是很陌生。

非常感谢您的帮助！

【问题讨论】：

利用 ngOnInit() 生命周期钩子
我想（模糊）和（焦点）都不会在加载时触发。您是否考虑过实际将管道用作管道？
@Avinash - 你能详细说明一下吗？是不是像调用ngOnInit里面的方法那么简单？
@BradleyDotNET - 我需要蓝色焦点以及会触发加载方法的东西。模糊和焦点用于将用户输入值更改为货币。当用户填写全新的表单时，这是需要的。
你不能尝试直接在输入字段上使用你的管道pipes within ngModel on input elements in Angular

标签： javascript angular methods

【解决方案1】：

通过在 ngOnInit 生命周期钩子中调用组件的 init 函数来运行该函数。您需要引用该元素才能从模板外部调用它，因此通过在模板上添加一个 viewchild 引用使其成为 viewchild，

例如

<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);
}

【讨论】：