子项的 @Input() 值在角度 2 中没有变化

Question

我需要更改来自家长的"孩子点击@Input值"事件中的数据。这就是我的做法：

父母

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>

孩子

@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
});
}

在第一次点击时，我得到了我想要的结果，但在随后的点击中，值不再改变。你能告诉我如何做到这一点吗？谢谢。

Answer 1

这是因为您在ngOnInit上调用createForm()，该仅在组件启动时调用一次。

使用*ngIf="sampleToUpdate"有条件地呈现子组件。但是，如果在未获取 falsy 值的情况下更改了值，则不会重新呈现子组件，也不会调用ngOnInit。

可以使用setteratsampleData属性来执行逻辑，如下所示：

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();
}

<小时 />

或

您可以使用生命周期挂钩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();
}

Answer 2

要检测输入中的更改，您可以使用 ngOnChanges

ngOnChanges(changes: SimpleChanges) {
if(changes.sampleData) {
// Add your logic
}
}