当 ngModel 设置了默认值时，ngModelChange 中事件的旧值答案

【问题标题】：Old value of the event in ngModelChange when ngModel has the default value set当 ngModel 设置了默认值时，ngModelChange 中事件的旧值
【发布时间】：2020-01-10 12:34:20
【问题描述】：

我正在尝试获取 ngModelChange 旧值。我想检测组件内部的下拉值是否已更改以重复调用该函数。

HTML：

        <select id = "translation" (ngModelChange)="getTranslationOnChange($event)" [(ngModel)]="selectedDevice" class="form-control float-right col-md-3">
            <option [ngValue]="language.id" *ngFor="let language of languages">{{language.name}}</option>
        </select>

selectedDevice 的值默认设置为"en"，因为我想在下拉菜单中将“en”设置为默认值。如何获取下拉列表的旧值和新值？

【问题讨论】：

标签： angular angular8

【解决方案1】：

很遗憾，目前这是不可能的。

我在这里遇到了类似的问题：Mat select - Get old value of selectionChange

使用Subject 的另一种解决方法：How to obtain previous and new value from Angular mat-select?

您可以通过将值推送到主题中来处理先前值和当前值，并使用成对运算符观察此主题。此运算符将发出流的先前值和当前值。 (https://www.learnrxjs.io/operators/combination/pairwise.html)

例子：


export class YOU_COMPONENT{

  private data: Subject<any> = new Subject<any>();

  checkTitle(value){
    this.data.next(value);
  }

  observeDataChange():Observable<[]>{
     // this return an observable of an array that contains [previous, current] data
     return this.data.asObservable().pipe(pairwise());
  }

}

最后，我通过在名称中添加前缀 old 的值来解决此问题。您可以在我的链接问题中找到另一种解决方法。

我希望它至少能给你一些启发。对此感到抱歉。

【讨论】：

还有其他方法可以实现吗？
我也问过我的一些同事，但似乎我们现在必须处理它。
好的，我无法添加旧前缀，因为我有一个需要旧值来检测更改的用例。

【解决方案2】：

我尝试了一些解决方法来获取 getTranslationOnChange() 中的值。不确定，但可能这可以达到目的。

HTML:-

<select id = "translation" (click) = "getVal(selectedDevice)" (ngModelChange)="getTranslationOnChange($event)" [(ngModel)]="selectedDevice" class="form-control float-right col-md-3">
            <option [ngValue]="language" *ngFor="let language of languages">{{language.name}}</option>
        </select>

TS:-

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.html'
})
export class AppComponent implements OnInit {
public languages = [{'id':1,'name':'en'},{'id':2,'name':'pt'},{'id':3,'name':'es'}];
public counter = 0;
public oldval;
public selectedDevice;
ngOnInit() {
  this.selectedDevice = this.languages[0];
}
getTranslationOnChange($event){
  console.log("new Value=",$event," +old value= ",this.oldval);
  this.counter++;
}
getVal(event){
  if(!this.counter) {
    this.oldval = event.name;
  }
  this.counter = 0;
}
}

我希望它有所帮助。谢谢

【讨论】：