如何使用 ngModelChange 实现 Angular 中的 onchange 事件反应

Question

html:

<mat-form-field appearance="outline"class="inputBox">
   <input matInput name="total" placeholder="0.00" [ngModel]="total"
     (ngModelChange)="handleOnChange('total', $event)" />
          </mat-form-field>

TS：

public handleOnChange = (field, e) => {
        console.log("hell", field)
        this.total=90
    }

在任何更改事件触发handleOnChange方法后，this.total的值应保持恒定在90，并且90应不断显示在输入框中。这是我试图实现的逻辑。但是当有onChange时第一次，输入值更改为 90，但第一次按下任意键后，值会更改..例如..90a,90tyhuil,90oojh....

我来自react..有人请建议我如何在Angular中的react输入标签中实现onChange事件。

Answer 1

删除（ngModelChange）事件

<mat-form-field appearance="outline"class="inputBox"> 
  <input matInput name="total" placeholder="0.00" [ngModel]="total"/>
</mat-form-field>

现在在构造函数中初始化总计的值，以便在输入更改之前它将保持不变

constructor() { 
  this.total=90
}

现在将 [ngModel]="total" 替换为 [(ngModel)]="total"，它将自动将新值分配给 Total，并将反映在输入中，并添加 [value]="total" 以将初始值重新填充到输入中

所以最终代码将是

<mat-form-field appearance="outline"class="inputBox">
  <input matInput name="total" placeholder="0.00" [(ngModel)]="total" [value]="total"/>
</mat-form-field>