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

Question

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

下拉/选择初始值是从问题[]的数组映射的，当前的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。