Angular2 display subscription after console.log - angularjs

Question

I have different problem.
I retrieve data from Services into variable, but this data doesn't display on screen after loading (I use Subscription for this operation). All data appears on screen when I click button with function getMessages(){ console.log(this.messages);}
Can you explain why?
import {Component, NgZone, OnInit} from '#angular/core';
import {GmailApiService} from "../google/api/gmailApi.service";
import {Subscription} from "rxjs/Rx";
#Component({
selector: 'gmail-app',
templateUrl: '/app/gmail/gmail.component.html'
})
export class GmailComponent implements OnInit{
public messages: Array<string>;
subscription:Subscription;
constructor(private gmailApi: GmailApiService){
}
ngOnInit() {
this.gmailApi.checkAuthAuto('from:(xyz#zyx.com) OR to:(azx#saa.com)');
this.subscription = this.gmailApi.openMessages$
.subscribe(messages => this.messages = messages);
}
getMessages(){
console.log(this.messages);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
Component files:
<template [ngIf]="messages">
Messages:
<h1 *ngFor="let message of messages">**{{message?.id}}**</h1>
</template>
<button id="button-get" (click)="getMessages(event)">
getMessages
</button>
---UPDATE---SOLUTIONS---
I found solutions for my problem, i add zone in subscription and now it's work correctly. Below I present part of my code after h
constructor(private zone:NgZone, private gmailApi: GmailApiService){
}
ngOnInit() {
this.gmailApi.checkAuthAuto('from:(xyz#zyx.com) OR to:(azx#saa.com)');
this.subscription = this.gmailApi.openMessages$
.subscribe(messages => {
this.zone.run(() => {
this.messages = messages;
});
});
}

Answer 1

I think it may be associated with lifecycle hooks. See this: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
I'm not sure but maybe you should implements doCheck and in subscribe call ngDoCheck method? Something like this:
export class GmailComponent implements OnInit, DoCheck {
public messages: Array<string>;
subscription:Subscription;
constructor(private gmailApi: GmailApiService){
}
ngOnInit() {
this.gmailApi.checkAuthAuto('from:(xyz#zyx.com) OR to: (azx#saa.com)');
this.subscription = this.gmailApi.openMessages$
.subscribe(messages => {
this.messages = messages;
ngDoCheck();
});
}
getMessages(){
console.log(this.messages);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngDoCheck() {
//do nothing, just call
}
}