[英]Child's @Input() value does not change in angular 2
I need to change the data in my Child's @Input value on click event from a parent.我需要在来自父级的单击事件中更改我孩子的 @Input 值中的数据。 This is how I do it in:
这是我如何做到的:
Parent家长
update(user: SampleData): void {
this.sampleToUpdate = user;
}
<td style="text-align: center;">
<button class="btn btn-icon btn-outline-info btn-sm" (click)="update(item)">
<i class="nc-icon nc-badge"></i>
</button>
</td>
<app-sample *ngIf="sampleToUpdate" [sampleData]="sampleToUpdate"></app-sample>
Child孩子
@Input() sampleData: SampleData;
ngOnInit(): void {
if (this.sampleData) {
debugger;
this.isUpdating = true;
this.nameToUpdate = `Updating ${this.sampleData.firstName} ${this.sampleData.lastName}`
} else {
this.isUpdating = false;
this.nameToUpdate = `Add New Sample`
}
this.createForm();
}
createForm(): void {
if (!this.sampleData) {
this.firstNameControl = new FormControl(this.sampleData.firstName, {
validators: [Validators.required],
updateOn: 'blur'
});
this.middleNameControl = new FormControl(this.sampleData.middleName);
this.lastNameControl = new FormControl(this.sampleData.lastName, {
validators: [Validators.required],
updateOn: 'blur'
});
this. loadAmountControl = new FormControl(this.sampleData.loadAmount, {
validators: [Validators.required, DecimalValidators.isNumberCheck],
updateOn: 'blur'
})
} else {
this.firstNameControl = new FormControl('', {
validators: [Validators.required],
updateOn: 'blur'
});
this.middleNameControl = new FormControl('');
this.lastNameControl = new FormControl('', {
validators: [Validators.required],
updateOn: 'blur'
});
this. loadAmountControl = new FormControl(0.00, {
validators: [Validators.required, DecimalValidators.isNumberCheck],
updateOn: 'blur'
})
}
this.form = new FormGroup({
firstName: this.firstNameControl,
middleName: this.middleNameControl,
lastName: this.lastNameControl,
loadAmount: this.loadAmountControl
});
}
On the first instance of the click, I get the result I wanted but on the succeeding clicks, the value does not change anymore.在第一次点击时,我得到了我想要的结果,但在随后的点击中,该值不再改变。 Can you show me how to do this right please?
你能告诉我如何正确地做到这一点吗? Thank you.
谢谢你。
It is because you call createForm()
on ngOnInit
which is called only once when the component is inited.这是因为您在
ngOnInit
上调用createForm()
,它仅在组件初始化时调用一次。
You use *ngIf="sampleToUpdate"
to conditionally render the child component.您使用
*ngIf="sampleToUpdate"
有条件地呈现子组件。 But if the value is changed without getting a falsy value, the child component will not be re-rendered and ngOnInit
will not be called.但是如果在没有得到虚假值的情况下更改值,则不会重新渲染子组件,也不会调用
ngOnInit
。
You can use setter
at sampleData
attribute to perform the logic as followings:您可以在
sampleData
属性中使用setter
来执行如下逻辑:
private _sampleData: SampleData;
@Input()
set sampleData(value:SampleData) {
this._sampleData = value;
if (this._sampleData) {
debugger;
this.isUpdating = true;
this.nameToUpdate = `Updating ${this._sampleData.firstName} ${this._sampleData.lastName}`
} else {
this.isUpdating = false;
this.nameToUpdate = `Add New Sample`
}
this.createForm();
}
OR或者
You can use ngOnChanges
lifecycle hook to get the sampleData
changes as followings:您可以使用
ngOnChanges
生命周期挂钩,以获得sampleData
变化如下:
ngOnChanges(changes: SimpleChanges): void {
// changes.sampleData will have previous and current value
if (changes.sampleData.currentValue) {
debugger;
this.isUpdating = true;
this.nameToUpdate = `Updating ${this.sampleData.firstName} ${this.sampleData.lastName}`
} else {
this.isUpdating = false;
this.nameToUpdate = `Add New Sample`
}
this.createForm();
}
To detect changes in the input you can use ngOnChanges要检测输入中的变化,您可以使用 ngOnChanges
ngOnChanges(changes: SimpleChanges) {
if(changes.sampleData) {
// Add your logic
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.