angular - 输入不更新视图 ngmodelchange

Question

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

按钮-add.component.html

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

按钮-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, ''));
  }
}

Answer 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：立即反映，但会显示轻微闪烁

如需更好地了解事件，请参阅最佳投注事件