log weekly january 2025 Angular

Angular 컴포넌트 초기화하기

2025년 1월 13일 월요일

Today I Learned

날짜

2025년 1월 13일 월요일

내용

초기화되지 않는 컴포넌트

서버에 요청을 보내고 받아온 데이터로 작은 모달을 열어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

facebookLogin() {
    FB.login((response: any) => {
      if (response.authResponse) {
        let userData = response.authResponse;
        this.coreApi.create(`shops/${this.shop.id}/facebook/login`, {
          facebook_access_token: userData['accessToken'],
          facebook_user_id: userData['userID'],
          facebook_profile: '',
          facebook_username: '',
        }).subscribe(response => {
          this.facebook_page_list = response.body.page_list;

          const dialogRef = this.dialog.open(FacebookPageComponent, {
            data: { facebookPageList: this.facebook_page_list },
            minWidth: '600px',
            minHeight: '600px'
          });
}

분명 facebook_page_list에는 올바른 데이터가 포함되는데 모달이 떠도 내부에 데이터가 보이지 않는다. 신기한건 그 페이지의 개발자도구를 키는 순간 데이터가 나타난다는 것.. 뭐 이런 듣도보도 못한 경우가 다 있나 싶었다.

원인은 찾지 못한채, 모달로 열리는 하위 컴포넌트가 초기화되지 않는 것이 문제라는 것만 알게 되었다. 따라서 시작할때 초기화를 억지로 시켜줬다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  constructor(
    ...
  ) {
  
	  // 초기화 시키기
    setTimeout(() => {
      this.ngOnInit();
    });
  }

  ngOnInit() {
    ...
    }
  }

회고

원인이 뭘까

CATALOG
    weekly