孩子的 @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"有条件地呈现子组件。 但是如果在没有得到虚假值的情况下更改值，则不会重新渲染子组件，也不会调用ngOnInit 。

您可以在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();
  }

---

或者

您可以使用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
 }

}