Angular 2 ngModelChange 旧值

Posted 2023-02-22

【中文标题】Angular 2 ngModelChange 旧值

【英文标题】：Angular 2 ngModelChange old value

【发布时间】：2017-05-23 11:34:06

【问题描述】：

谁能告诉我比较 ngModel 新旧值的最佳做法是什么？

角度 1：

$scope.$watch('someProperty', funciton(oldVal, newVal)
    // code goes here
)

我问这个是因为(ngModelChange) 从来没有给我带来oldVal，只有newVal。

就我而言，我在 <select> 标记中使用 ngModel 并将旧选择与新选择进行比较：

<select [(ngModel)]="current" (ngModelChange)="onModelChange($event)">
     <option *ngFor="let item of myArray" [ngValue]="item">item.name </option>
</select>

【参考方案1】：

输入字段示例...

<div *ngFor="let value of values">value
    <input [(ngModel)]="value" (focus)="old=value" (ngModelchange)="doSomething(old, value)">
</div>

doSomething(oldVal, newVal) 
    // some code

【讨论】：

我在 标签中使用了这个比较（参见我编辑的帖子）。我想（焦点）不再相关了。你能写一个带有选择标签的例子吗？

【参考方案2】：

这可能有效

(ngModelChange)="onModelChange(oldVal, $event); oldVal = $event;"

或

(ngModelChange)="onModelChange($event)"

oldValue:string;
onModelChange(event) 
  if(this.oldValue != event) 
    ...
  
  this.oldValue = event;

【讨论】：

我试过了，但 oldVal 参数未定义。我在 标记中使用此比较（请查看我编辑的帖子）

只需在组件类中声明一个具有此名称的变量即可。我将它添加到我的代码中（在第二个示例中）

好的，我现在明白了。但是这个解决方案似乎非常手动，你确定这是最佳做法吗？ Angular 2 没有提供任何东西来获取 oldVal？

不，Angular 只提供$event，或者如果您使用[ngModel]="myValue"，则使用新值更新myValue 属性。如果您使用[myProp]="someValue" 绑定到@Input() myProp;，那么当绑定更新ngOnChanges(changes) 时，changes 也包含旧值，但这不适用于您的情况，它仅适用于来自父级的绑定给孩子。

在我的例子中，选择值已经设置好了，所以this.oldValue的值是undefined，因为onModelChange将是第一次运行。是否也有解决方法？

【参考方案3】：

只为未来

我们需要观察到 [(ngModel)]="hero.name" 只是一个捷径，可以脱糖为： [ngModel]="hero.name" (ngModelChange)="hero.name = $事件”。

因此，如果我们对代码进行去糖化处理，我们最终会得到：

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

或

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

如果您检查上面的代码，您会注意到我们最终得到了 2 个 ngModelChange 事件，并且这些事件需要按某种顺序执行。

总结：如果你把 ngModelChange 放在 ngModel 之前，你会得到 $event 作为新值，但你的模型对象仍然保持以前的值。 如果你把它放在 ngModel 之后，模型就已经有了新的值。

SOURCE

示例堆栈闪电战： https://stackblitz.com/edit/angular-ivy-zlhwex