Метод запуска под нагрузкой - угловой 4

Question

У меня есть пользовательская форма, которая принимает входное значение, которое конвертируется в валюту с использованием валютной трубы Angular.Пожалуйста, просмотрите фрагмент кода ниже.

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.

Спасибо за любую помощь, спасибо!

Answer 1

Запустите функцию при инициализации компонента, вызвав ее внутри хука жизненного цикла ngOnInit.Вам понадобится ссылка на элемент для вызова его извне шаблона, поэтому сделайте его viewchild, добавив в шаблон ref-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);
}