Ionic - Scroll to Bottom issue

messages.html

<ion-header>
  <ion-navbar>
    <ion-title>
    Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<ion-list>
  <ion-item  text-wrap *ngFor="let message of messages" >
    <h2>{{message}}</h2>
  </ion-item>
</ion-list>


</ion-content>

messages.ts

import { Component, ViewChild  } from '@angular/core';

import { Content, NavController, NavParams } from 'ionic-angular';


@Component({
  selector: 'messages',
  templateUrl: 'messages.html'
})
export class Messages {
  messages: any;
  intervalId: number = 0;
  @ViewChild(Content) content: Content;

 ionViewDidEnter() {
    this.content.scrollToBottom(0);
  }

  ionViewWillUnload(){
    clearInterval(this.intervalId);
  }

  constructor() {
    this.messages = [12,44,23,53,563,234,1,21,23,5234,56213,13,34,245,123,12,123,123,12,123,123,123,13,5,
    213123,123,5,123,5,123,123,34,123,5,13,34,45,123];

    this.intervalId = setInterval( () => {
     this.fetchMessages();
    }, 1000);

  }

  appendRows(newData){
    if(!newData || newData.length == 0)
      return;

    if(this.messages){
      let newArray = this.messages.concat(newData);
      this.messages = newArray;
    }else{
      this.messages = newData;
    }

    this.content.scrollToBottom(0);
  }

  fetchMessages(){
     this.appendRows(this.randomNumbers());
  }

  randomNumbers(){
    return Math.random();
  }
  
}