angular - 输入时对 NgModel 的更改未更新 View

Question

我的 html 上有一个输入字段，我需要限制它的值。

我正在尝试这样做:

HTML:

<div *ngFor="let option of options">
    <input type="text" [ngModel]="option.value" (change)="onChangeValue($event.target.value, option)">
</div>

typescript :

onChangeValue(valueString: string, option: OptionViewModel) {
    var value: number = parseInt(valueString);

    // Check some conditions. Simplified code just for example
    if (option.value != value && value > 5) {
        value = 5;
    }

    option.value = value;
}

选项 View 模型:

export class OptionViewModel {
    public optionId: number;
    public description: string;
    public pollId: number;
    public value?: number;
}

我尝试使用双向绑定(bind)，但是我的代码依赖于 option.value 的先前值，并且使用双向绑定(bind)会在进入函数之前更改变量。

问题是，有时输入字段没有被更新。
看起来我只是在第一次需要更改值时才工作，例如，如果输入 6，则字段正确更改为 5，但是如果我添加 0(使其变为 50)，则不正确5.

我调试了代码，它正在运行函数并更改 option.value，甚至使用 Augury 检查对象显示正确的值。

Answer 1

在第二次编辑时，输入元素的内容没有更新，因为 Angular 没有检测到任何变化(option.value 是 5，现在仍然是 5)。这里有两种强制刷新元素的方法。

方法 1 - 替换数组中的选项项

您可以通过将数组中的选项替换为克隆副本来强制更新字段，如 所示。 this stackblitz :

<div *ngFor="let option of options; let i=index">
  <input [ngModel]="option.value" (change)="onChangeValue($event.target.value, i)" type="text" >
</div>

onChangeValue(valueString: string, index: number) {
  var value: number = parseInt(valueString);
  if (value > 5) {
    value = 5;
  }
  this.options[index] = this.options[index].cloneWithValue(value);
}

export class OptionViewModel {
  public optionId: number;
  public description: string;
  public pollId: number;
  public value?: number;

  public cloneWithValue(value: number): OptionViewModel {
    let dest = new OptionViewModel();
    dest.optionId = this.optionId;
    dest.description = this.description;
    dest.pollId = this.pollId;
    dest.value = value;
    return dest;
  }
}

方法 2 - 在 trackBy 函数中使用附加字段

另一种解决方案是向 OptionViewModel 添加一个附加字段。 (例如 lastModified )并在 trackBy 中使用它 ngFor 的方法指令(见 this stackblitz ):

<div *ngFor="let option of options; trackBy: trackByFn">
  <input [ngModel]="option.value" (change)="onChangeValue($event.target.value, option)" type="text">
</div>

onChangeValue(valueString: string, option: OptionViewModel) {
  var value: number = parseInt(valueString);
  if (value > 5) {
    value = 5;
  }
  option.value = value;
  option.lastModified = Date.now();
}

trackByFn(index: number, option: OptionViewModel) {
  return `${index}___${option.lastModified}`;
}

export class OptionViewModel {
  public optionId: number;
  public description: string;
  public pollId: number;
  public value?: number;
  public lastModified: number = 0;
}