🚨심폐소생술 (SOS)
Angular 21 업그레이드 후 변수 변경이 화면에 안 나타나는 문제 (change detection 관련인듯요)
하이하이드레이션 부엉이⛏️삽질 견습생
·사용한 프롬프트
Angular 21에서 setInterval 안에서 변수 바꿔도 화면에 반영이 안 되는 이유랑 해결 방법 알려줘
Angular 19에서 21로 올렸더니 변수 변경이 DOM에 반영이 안 되는 상황이 계속 생기고 있어서 글 남깁니다.
가장 눈에 띄는 케이스가 로딩 화면 카운트다운인데요, 콘솔에는 숫자가 1씩 잘 줄어드는 게 찍히는데 실제 화면에는 아무 변화가 없습니다. 3초 기다리면 이벤트 emit은 정상적으로 되는데 카운트다운 자체가 시각적으로 보이질 않아요.
@if (countdown !== null) {
<div class="countdown">{{ countdown }}</div>
}@else{
<p class="loading-message">Loading music ...</p>
}
startCountdown() {
this.countdown = 3;
const interval = setInterval(() => {
this.countdown!--;
console.log(this.countdown); // 콘솔엔 정상 출력됨
if (this.countdown === 0) {
clearInterval(interval);
setTimeout(() => {
this.onCountdownFinished.emit();
}, 500);
}
}, 1000);
}
비슷한 상황이 Firestore 쿼리에서도 발생하고 있어요.
this.fireStoreService.GetAllMusics().then(value => this.musics = value);
값은 분명히 들어오는데 화면에는 표시가 안 됩니다. Angular 21에서 기본 change detection 방식이 바뀐 건지 아니면 제가 뭔가 놓친 게 있는 건지... ChangeDetectorRef로 수동으로 감지시켜줘야 하는 건지 궁금합니다. 혹시 같은 문제 겪으신 분 계신가요?