Angular - How to update a child component that takes an input parameter and renders it correctly the first time

Question

My educational experience is as follows:<cdk-virtual-scroll-viewportitemSize="5"class="list-scroll"><app-education-item*ngFor="leteducationofloadedEducations"(isSelected)="changeSelected(

P粉658954914 · Answer

The loadedEducations list does not change when you change the properties of the items in the list. Try refreshing the list (this.loadedEducations = returnedEducations) or use state management

in your project

P粉022723606 · Answer

The root cause of the problem is that @Input() cannot detect changes inside objects and arrays because they are both reference types. Your education property is an object, so changes made in the parent component that directly change the property (e.g. education.school = 'newValue') will not trigger the child component's property# Any changes to ##@Input() education

There are several ways to solve this problem, each with its advantages and disadvantages:

Pass only the properties you need as 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
  }
}

advantage:

to child components

shortcoming:

Additional boilerplate is required to

changes to child components. As the number of @Input grows, it becomes unwieldyYou lose the semantic coupling between parent and child components, they are actually bound by a shared interface (i.e. the
interface)Does not scale well if properties are also reference types, in which case these properties also need to be unpacked and passed as primitives

Rebuild object in parent when changed

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

Deep Clone

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

advantage:

Retain the use of the

interface to maintain the semantic coupling between parent components and child componentsEncourage the use of
It is generally a good practice for objects No additional boilerplate is required to
subcomponents.

shortcoming:

Additional boilerplate is needed to

changes to child components, i.e. create redundant updateEducation() functions in the parent component

Pass reactive elements into your subcomponent, such as

BehaviorSubject

, and subscribe to changes directly

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

advantage:

Full control over event sending/subscription. This is good for any other side effects you wish to trigger

Can be easily extended to use many components, such as putting the
into a service and injecting the same service into any component that needs itAlso advocates the use of
No additional boilerplate requiredReceive changes to
subcomponents

shortcoming:

Additional boilerplate is needed to send changes to child components, i.e. create redundant updateEducation() functions in the parent component

Typical limitations of using reactive code, such as only mutating via streams, needing to avoid unsubscriptions (if not using | async), etc.