时间戳

首页 > 解决方案 > ngModelChange 输入上的无限循环

angular - ngModelChange 输入上的无限循环

问题描述

我有一个这样的html：

<ng-template [ngSwitchCase]="'textbox'">
    <input *ngIf="setting.type==='number'"
           [step]="setting.step"
           [formControlName]="formName"
           [id]="formName"
           [type]="setting.type"
           [placeholder]="setting.placeholder"
           [title]="setting.description"
           (ngModelChange)="onChange($event)">
</ng-template>

在控制器上我有 onChange 函数：

onChange(newValue: string) {
    if (newValue === undefined)
        return;

    this.form.get(this.formName).setValue(<any>parseFloat(newValue));
}

当我调试 onChange 函数的这个调用时，我注意到它仍在调用并且真的不知道为什么。我有一个无限循环。

我的角度包：

"@angular/animations": "8.2.7",
"@angular/cli": "8.3.5",
"@angular/common": "8.2.7",
"@angular/compiler": "8.2.7",
"@angular/core": "8.2.7",
"@angular/forms": "8.2.7",
"@angular/platform-browser": "8.2.7",
"@angular/platform-browser-dynamic": "8.2.7",
"@angular/router": "8.2.7",
"@babel/polyfill": "7.6.0",

您知道我的代码可能有什么问题吗？

标签： angulartypescriptangular7infinite-loopangular-ngmodelchange

解决方案

这可能是因为在 onChange 函数中设置了输入值，它再次更改了输入值并再次调用 onChange。这无限地继续下去。

在需要时将其转换为数字，而不是将字符串解析为数字，然后将其设置回控件，这是不必要的。

parseFloat(this.form.get(this.formName).value)

或者

+this.form.get(this.formName).value

在这种情况下，您不需要每次更改值时都将其解析为数字，而是在需要时解析它。

您可以使用上述行之一将输入解析为每次更改时的数字，但不要再次将其设置为相同的控件。

onChange(newValue: string) {
    parseFloat(this.form.get(this.formName).value)
}

推荐阅读