Ionic 2 *ngFor push strange behaviour

Ionic Framework ionic-v3
1

Hello, I have an array of items fetched from server. I have scroll listener on my ion-content, so when scrollTop value is greater than 200, I want to push one more element from array of fetched data. In my console I see, that item is successfully pushed, but ngFor doesn’t update DOM. Moreover, when I click on link to see single item page and return to home page DOM is updated and I can see pushed item.

Here is the home page component code:

export class HomePage {
  @ViewChild(Content) content: Content;
  items: any[];
  bufferedItems: any[];
  addItem: boolean;
  
constructor(public navCtrl: NavController, private newsService: newsService) {
    this.items = [];
    this.addItem = true;
  }

ngOnInit() {
    this.getPosts();
    this.content.ionScroll.subscribe(event => this.detectScroll(event));
  }

detectScroll(e) {
    if(e.scrollTop > 200 && this.addItem == true) {
        this.items.push(this.bufferedItems[1]);
        this.addItem = false;
        console.log(this.items); // outputs array with 2 elements, as expected
    }
  }

getPosts() {
    this.newsService.getPosts().subscribe(response => {
      this.bufferedItems = response;
      this.items.push(this.bufferedItems[0]); // show only first element at the beginning
    });
  }
}

Here is part of home.html code

<ion-content padding id="content">
  <ion-list id="ion-list">
    <news-item *ngFor='let item of items' [item]='item'></news-item>
  </ion-list>
</ion-content>

I’ve tried to change ‘let item’ to ‘#item’ as mentioned in this post, but it outputs an error.

Also I’ve noticed, that if I put animation on item with long execution time like 5s fade in animation and begin to scroll, second item is rendered correctly, but only if scroll is done before animation ends