Оборачивание API-интерфейса facebook из SDK в настраиваемую наблюдаемую не запускает обнаружение угловых изменений при первом вызове функции обратного вызова подписки

Question

Я хочу, чтобы обернуть Facebook SDK API в пользовательских наблюдаемых. В index.html я импортировал внешний SDK и вызываю функцию FB.init()

<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
....
....
....
<script>
  window.fbAsyncInit = function () {
      FB.init({
          appId: 'xxxxxxxxxxxxxxxx',
          cookie: true,
          xfbml: true,
          version: 'v3.3'
      });
  };
</script>

В сервис аутентификации я включил функцию FB.getLoginStatus()

checkFacebookLoginStatus(): Observable<AuthResponse|boolean> {
    return Observable.create((observer: Observer<any>) => {
      FB.getLoginStatus((res) => {
        if (res.status === 'connected') {
          observer.next(res.authResponse);
          observer.complete();
        } else {
          observer.next(false);
          observer.complete();
        }
      });
    });
  }

В компоненте входа в систему я вызываю эту функцию, когда пользователь нажимает кнопку, и при следующем обратном вызове функции подписки я назначаю успешный объект AuthResponse атрибуту компонента с именем fb_credentials

fb_credentials: AuthResponse = null;
....
....
....
getLoginStatus() {
    this.auth.checkFacebookLoginStatus()
      .subscribe(
        result => {
          console.log(result);
          if (result !== false) {
            this.fb_credentials = result;
          }
        }
      );
  }

Когда я запускаю эту функцию в первый раз, все работает правильно, за исключением назначения, которое не запускает обнаружение изменений, фактически в представлении компонента входа в систему информация пользователя не отображается.

<div *ngIf="fb_credentials">
  <div>
    <label>First name</label><span>{{fb_credentials.first_name}}</span>
  </div>
  <div>
    <label>Last name</label><span>{{fb_credentials.last_name}}</span>
  </div>
  <div>
    <label>Email</label><span>{{fb_credentials.email}}</span>
  </div>
</div>

Странно то, что если я запускаю функцию второй раз или щелкаю по другим элементам представления компонентов, которые запускают обнаружение изменений, представление обновляется, и последующие вызовы функции обновляют представление. Я знаю методы принудительного обнаружения изменений, такие как NgZone.run() или ChangeDetectorRef.detectChanges(). Мой вопрос состоит только в том, чтобы понять, почему это происходит. Если бы оно находилось за пределами угловой зоны, обнаружение изменений не должно работать даже во второй раз.