在角度中，如何在更改事件触发后获取 select/ngModel 以前的值

Question

我正在使用 Angular 2 表单，并且在模板中具有下拉/选择，其数据与 ngModel 和 onChnage 事件绑定。我需要检测 ngModel 的先前值吗？我尝试过使用 data-* 属性 https://www.w3schools.com/tags/att_global_data.asp 将当前值存储在其中，希望它不会随 ngModel 值而改变，然后在事件触发时发回，但在传递更改时获取 NaN 值。

下拉/选择初始值是从数组即question[]映射的，当前defaultValue在“question.value”中

模板

<div *ngSwitchCase="'dropdown'"> <small>dropdown</small>
           <div class="form-group">
                {{question.value}}
               <select [id]="question.key" 
                       [formControlName]="question.key" 
                       [(ngModel)]="question.value"  
                       data-default-element="question.value"     
                       (change)="onChangeValue($event, responseId, question.key, data-default-element , 'dropdown')" 
                       (blur)="onChangeValue($event, responseId, question.key, data-default-element , 'dropdown')"
                       >

                   <option *ngFor="let opt of question.options" 
                           [value]="opt.key" >{{opt.value}} </option>
               </select>
           </div>            
       </div>  

组件

onChangeValue(event: any, givenResponseId:string, givenQuestionId:string, defaultValue:string, givenInputType:string) { 

    var givenAnswer = null;

    console.log("defaultValue  ",defaultValue);

    if(event.target.value !="")
    {
       givenAnswer = event.target.value;
       console.log("newValue  ",givenAnswer );
    }

 }

Answer 1

您必须考虑使用来自“@angular/core”的 OnChanges。有了这个，您可以获得当前值和以前的值。这是一个例子。请注意，它仅适用于 Input 类型的属性

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
 selector: 'app-your-selector',
 templateUrl: './template-path.html',
 styleUrls: ['./style-path.css']
})
export class myComponent implements OnChanges{

 @Input() myAttribute : string;//This should be your ngModel attribute

 ngOnChanges(changes : SimpleChanges ){
   if(changes["myAttribute"]){
    let currentValue = changes["myAttribute"].currentValue;
    let previousValue = changes["myAttribute"].previousValue;
   }
  }
}

Answer 2

如果您从表单中删除 ngModel，并将 question.value 而不是 data-default-element 传递给您的更改方法，您将获得以前的值。然后，您可以在您的更改方法中更新question.value，以便根据需要使用给定的答案更新它。 ngModel 将双向绑定数据，当用户在表单中输入内容时更新您的 question.value。