La liste chargéeEducations ne change pas lorsque vous modifiez les propriétés des éléments de la liste. Essayez d'actualiser la liste (this.loadedEducations = returnedEducations) ou utilisez la gestion d'état dans votre projet

La cause première du problème est tout changement dans @Input() 无法检测到对象和数组内部的更改，因为它们都是 引用类型。您的 education 属性是一个对象，因此在父组件中进行的直接改变属性的更改（例如 education.school = 'newValue' ）不会触发子组件的属性 @Input() education

Il existe plusieurs façons de résoudre ce problème, chacune avec ses avantages et ses inconvénients :

Passez uniquement les propriétés dont vous avez besoin en tant que primitives

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
  }
}

Avantages :

• Simple et intuitif à utiliser, fonctionne « juste »
• Envoyer les modifications aux composants enfants sans passe-partout supplémentaire

Inconvénients :

Un passe-partout supplémentaire est nécessaire pour
• recevoir les modifications apportées aux composants enfants. À mesure que le nombre de augmente, cela devient lourd@Input
Vous perdez le couplage sémantique entre les composants parent et enfant, ils sont en fait liés par une interface partagée (c'est-à-dire
• interface) Education
Ne s'adapte pas bien si les propriétés sont également des types de référence, auquel cas ces propriétés doivent également être décompressées et transmises en tant que primitives

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
  }
}

Clonage profond

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
  }
}

Avantages :

Conserver l'utilisation de l'interface
• pour maintenir le couplage sémantique entre les composants parent et enfantEducation
Promouvoir l'utilisation d'
• objets immuablesC'est généralement une bonne pratique pour les objets
Pas besoin de passe-partout supplémentaire pour
• recevoir les modifications apportées aux sous-composants.

Inconvénients :

Nécessite un passe-partout supplémentaire pour
• envoyer les modifications au composant enfant, c'est-à-dire créer des fonctions updateEducation() redondantes dans le composant parent

et abonnez-vous directement aux modificationsBehaviorSubject

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 }}

Avantages :

• Contrôle total sur l'envoi/l'abonnement aux événements. C'est bon pour tout autre effet secondaire que vous souhaitez déclencher
• Peut être facilement étendu pour utiliser de nombreux composants, par exemple mettre educationSubject dans un service et injecter le même service dans n'importe quel composant qui en a besoin
• Prône également l'utilisation d'objets immuables
• Aucun passe-partout supplémentaire n'est requis pour recevoir les modifications apportées aux sous-composants

Inconvénients :

• Nécessite un passe-partout supplémentaire pour envoyer les modifications au composant enfant, c'est-à-dire créer des updateEducation() fonctions
redondantes dans le composant parent
• Limites typiques de l'utilisation de code réactif, comme la mutation uniquement via des flux, la nécessité d'éviter de se désinscrire (si vous n'utilisez pas | async), etc.