Senarai Pendidikan yang dimuatkan tidak berubah apabila anda menukar sifat item dalam senarai. Cuba muat semula senarai (this.loadedEducations = returnedEducations) atau gunakan pengurusan negeri dalam projek anda

Punca masalah adalah sebarang perubahan dalam @Input() 无法检测到对象和数组内部的更改，因为它们都是 引用类型。您的 education 属性是一个对象，因此在父组件中进行的直接改变属性的更改（例如 education.school = 'newValue' ）不会触发子组件的属性 @Input() education

Terdapat beberapa cara untuk menyelesaikan masalah ini, setiap satu dengan kebaikan dan keburukannya:

Luluskan hanya sifat yang anda perlukan sebagai primitif

parent.component.ts

education: Education = 

parent.component.html

child.component.ts

export class EducationItemComponent implements OnChanges {
  @Input() school: string;
  @Input() degree: string;

  ngOnChanges(changes: SimpleChanges): void {
    // will emit whenever .school or .degree is changed in the parent
  }
}

Kelebihan:

• Mudah dan intuitif untuk digunakan, berfungsi "hanya"
• Hantar perubahan kepada komponen kanak-kanak tanpa boilerplate tambahan

Kelemahan:

Boilerplate tambahan diperlukan untuk
• menerima perubahan kepada komponen kanak-kanak. Apabila bilangan bertambah, ia menjadi sukar digunakan@Input
Anda kehilangan gandingan semantik antara komponen ibu bapa dan anak, ia sebenarnya terikat dengan antara muka yang dikongsi (iaitu
• antara muka) Education
Tidak berskala dengan baik jika sifat juga merupakan jenis rujukan, dalam hal ini sifat ini juga perlu dibongkar dan diluluskan sebagai primitif

parent.component.ts

education: Education = 

updateEducation(educationProps: Partial): Education {
  this.education = {
    ...this.education, // Note: You may want to 'deep clone' your object depending on how nested it is
    ...educationProps
  }
}

Klon Dalam

parent.component.html

child.component.ts

export class EducationItemComponent implements OnChanges {
  @Input() education: Education;

  ngOnChanges(changes: SimpleChanges): void {
    // will emit whenever updateEducation() is called in the parent
  }
}

Kelebihan:

Kekalkan penggunaan
• antara muka untuk mengekalkan gandingan semantik antara komponen ibu bapa dan anakEducation
Menggalakkan penggunaan
• objek tidak berubahSecara amnya ia merupakan amalan yang baik untuk objek
Tidak memerlukan boilerplate tambahan untuk
• menerima perubahan kepada subkomponen.

Kelemahan:

Memerlukan boilerplate tambahan untuk
• menghantar perubahan kepada komponen anak, iaitu mencipta fungsi berlebihan updateEducation() dalam komponen induk

dan langgan terus perubahanBehaviorSubject

parent.component.ts

educationSubject: BehaviorSubject = new BehaviorSubject(  )

updateEducation(educationProps: Partial): Education {
  const updatedEducation: Education = {
    ...this.education, // Note: You may want to 'deep clone' your object depending on how nested it is
    ...educationProps
  }
  this.educationSubject.next(updatedEducation}
}

parent.component.html

child.component.ts

export class EducationItemComponent implements OnChanges {
  @Input() educationSubject: BehaviorSubject;
}

child.component.html

  
{{ education.school }}

Kelebihan:

• Kawalan penuh ke atas penghantaran/langganan acara. Ini bagus untuk sebarang kesan sampingan lain yang anda ingin cetuskan
• Boleh diperluaskan dengan mudah untuk menggunakan banyak komponen, cth. meletakkan educationSubject ke dalam perkhidmatan dan menyuntik perkhidmatan yang sama ke dalam mana-mana komponen yang memerlukannya
• Juga menyokong penggunaan objek tidak berubah
• Tiada boilerplate tambahan diperlukan untuk menerima perubahan kepada subkomponen

Kelemahan:

• Memerlukan boilerplate tambahan untuk menghantar perubahan kepada komponen anak, iaitu mencipta fungsi updateEducation() berlebihan
dalam komponen induk
• Had biasa penggunaan kod reaktif, seperti bermutasi hanya melalui strim, perlu mengelak daripada berhenti melanggan (jika tidak menggunakan | async), dsb.