angular 8一个变量在onchanges事件中被修改，但当我想访问它时，我发现它没有改变

Question

我在angular中有一个应用程序，我有一个具有custem属性的组件"modeInsert"；，我在ngOnChanges((事件中检测到该属性的更改，如下所示：

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

@Component({
selector: 'app-update-cv',
templateUrl: './update-cv.component.html',
styleUrls: ['./update-cv.component.css']
})
export class UpdateCVComponent implements OnInit ,OnChanges {
constructor() { }
mode:boolean;
ngOnInit() {
}
ngOnChanges(changeRecord: SimpleChanges): void {
if(typeof changeRecord.modeInsert !== 'undefined'){
this.mode=changeRecord.modeInsert.currentValue;
console.log("changeRecord._modeInsert :"+this.mode);
}
}
@Input() modeInsert: boolean;
@ViewChild('closebuttonUpdateCV',{static: false}) closebuttonUpdateCV;
onUpdateCV(cv){
console.log(" onUpdateCV mode ="+this.mode)
if(this.mode){
console.log(" mode = ajout")
}else {
console.log(" mode = modif")
}
this.closebuttonUpdateCV.nativeElement.click();
}
}

，这个变量在Onchanges Event中更改其值，但当我尝试达到它的值时，我发现它没有更改，就像在methode onUpdateCV(cv(中一样。

Answer 1

您将在ngOnChanges 中获得当前和以前的值

ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let chng = changes[propName];
let cur  = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
}
}

Answer 2

原因是我放了这个组件的两个副本，一个在菜单中，另一个在另一个组件中，所以当我从其他组件调用may compenet时，我会调用菜单上的版本，并且变量this.mode是未定义的。这是may组件的模板，是一种模态形式：

<div class="modal fade" id="myModalEtatCivile" tabindex="-1" role="dialog" 
aria-labelledby="ModalLabelEtatCivile" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabelEtatCivile">

</h5>
<button type="button" #closebuttonUpdateCV class="close" data-dismiss="modal" 
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>


</div>
<form #fcv="ngForm" (ngSubmit)="onUpdateCV(fcv.value)">
<div class="modal-body">
<div class="form-group">
<label for="description">nom:</label>
<input type="text" class="form-control" placeholder="nom"   name="nom" ngModel>

</div>
<div class="form-group">
<label for="organisation">prenom:</label>
<input type="text" class="form-control" placeholder="prenom"   name="prenom" ngModel>

</div>
<div class="form-group">
<label for="organisation">Etat civile :</label>
<input type="text" class="form-control" placeholder="Etat civile" name="etatcivile"  ngModel>

</div>
<div class="form-group">
<label for="organisation">Adress :</label>
<input type="text" class="form-control" placeholder="Adress" name="adress" ngModel>

</div>
<div class="form-group">
<label for="organisation">Email :</label>
<input type="text" class="form-control" placeholder="Email"  name="email" ngModel>

</div>
<div class="form-group">
<label for="organisation">Tel :</label>
<input type="text" class="form-control" placeholder="Tel." name="tel" ngModel>

</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Sauvgarder</button>
</div>
</form>
</div>
</div>
</div>

但在这种情况下，我做什么来校准副本我称之为