목록에 있는 항목의 속성을 변경해도 로드된 교육 목록은 변경되지 않습니다. 목록을 새로 고치거나(this.loadedEducations = returnedEducations) 프로젝트에서 상태 관리를 사용해 보세요

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

이 문제를 해결하는 방법에는 여러 가지가 있으며 각 방법에는 장단점이 있습니다.

필요한 속성만 기본 요소로 전달하세요

parent.component.ts

parent.component.html

child.component.ts

장점:

• 사용이 간단하고 직관적이며 "정상적으로" 작동합니다
• 추가 상용구 없이 하위 구성 요소에 변경 사항 보내기

단점:

하위 구성 요소에 대한 변경 사항을
• 수신 하려면 추가 상용구가 필요합니다. 의 수가 늘어나면 다루기 힘들어집니다@Input
상위 구성 요소와 하위 구성 요소 사이의 의미적 결합을 잃게 되며 실제로는 공유 인터페이스(예:
• 인터페이스)에 바인딩됩니다. Education
속성이 참조 유형인 경우 확장이 잘 되지 않습니다. 이 경우 이러한 속성도 압축을 풀고 기본 형식으로 전달해야 합니다.

parent.component.ts 으아아아

딥 클론

parent.component.html 으아아아

child.component.ts 으아아아

장점:

상위 구성요소와 하위 구성요소 간의 의미적 결합을 유지하기 위해
• 인터페이스 사용을 유지Education
• 불변 객체 사용을 장려하세요일반적으로 객체에 대한 좋은 습관입니다
하위 구성 요소에 대한 변경 사항을
• 수신하기 위해 추가 상용구가 필요하지 않습니다.

전송
• 하려면 추가 상용구가 필요합니다. 즉, 상위 구성 요소에 중복 기능 을 생성합니다. updateEducation()

BehaviorSubject

으아아아 parent.component.ts

으아아아 parent.component.html

으아아아 child.component.ts

으아아아 child.component.html

• 이벤트 전송/구독을 완벽하게 제어할 수 있습니다. 이는 유발하려는 다른 부작용에 좋습니다
• 많은 구성 요소를 사용하도록 쉽게 확장할 수 있습니다. 예를 들어 educationSubject 서비스에 넣고 동일한 서비스를 필요한 모든 구성 요소에 주입할 수 있습니다.
또한
• 불변 객체 사용을 옹호합니다. 하위 구성 요소
• 에 대한 변경 사항을 수신하는 데 추가 상용구가 필요하지 않습니다.