输入不更新视图 ngmodelchange

【问题标题】：input not update view ngmodelchange输入不更新视图 ngmodelchange
【发布时间】：2021-08-04 21:13:40
【问题描述】：

我想删除字母并只留下数字，验证很好，但输入视图没有正确更新。变量“数量”确实改变了它的值，我可以在下面显示它
<p> {{quantity}} </p>

button-add.component.html

<input
      [ngModel]="quantity"
      (ngModelChange)="quantity = changeQuantity($event)"
    />
    <p> {{quantity}} </p>

button-add.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'button-add-button',
  templateUrl: './button-add.component.html',
  styleUrls: ['./button-add.component.scss'],
})
export class ButtonAddComponent implements OnInit {
  quantity: number = 10;
  constructor() {}

  public changeQuantity(cant: string) {
    return parseInt(cant.replace(/[^0-9]+/g, ''));
  }
}

【问题讨论】：

也许这会有所帮助：Angular Forms: Why is ngModelChange late when updating ngModel value.

标签： angular ngmodel angular-ngmodelchange

【解决方案1】：

您使用ngModel的方式不正确，您需要先更正，然后在keyup事件上进行而不是更改模型，请参考以下代码

<input [(ngModel)]="quantity" (keyup)="changeQuantity($event)" />
<p> {{quantity}} </p>

也不要直接在您的.html 中设置值，而是将其保留在您的.ts 中并将其重新分配给数量，请参阅下面的代码

public changeQuantity(cant: any) {
  this.quantity = parseInt(cant.target.value.replace(/[^0-9]+/g, ''));
}

请找出各种事件的行为，这将有助于您决定何时触发changeQuantity()

按键或输入：在每次下一次击键时，您的价值都会得到更新了
更改：外部点击控制会触发此操作
keyup：立即反映，但会显示轻微闪烁

有关事件的更好说明，请参阅best bet event

【讨论】：