Ionic2 ion-slides doesn't load till click

Ionic Framework ionic-v3
1

I’m using ngInit to load some images into my ionic-slider, but the imagens doesn’t load ultill I click in the slider

import {Page, NavController, Platform, Slides} from 'ionic-angular';
import {NgZone} from 'angular2/core';
import {FirebaseService} from '../../lib/firebaseService'
import {ViewChild} from 'angular2/core';


import {
  OnInit
} from 'angular2/core';


@Page({
  templateUrl: 'build/pages/camera/camera.html',
})

export class CameraPage implements OnInit {
  @ViewChild('mySlider') slider: Slides;

  mySlideOptions = {
    pager: true,
  };

  _zone: any;
  platform: any;
  images: Array<{ src: String }>;

  constructor(platform: Platform, _zone: NgZone, public FBService: FirebaseService) {
    this._zone = _zone;
    this.platform = platform;
    this.images = [];
  }


  ngOnInit() {

    this.FBService.getPics()
      .subscribe((data: Array<any>) => {

        this.images = data;

      })

  }

image
2bcb464a-e9a6-4d90-a555-1430bb200781.png445×791 15.1 KB

image
1266ce89-51a7-4e15-a1fa-af09dbbf9074.png445×791 50.5 KB

2

@diogocfernandes It might be caused by a zone-related issue (check out the linked topic for details):

1 Like
3

Thanks for the help!

When I changed:

this.images = data;

with:

this._zone.run(() => {
// HACK: Workaround for a bug in zone.js (0.6.12):
// https://github.com/angular/zone.js/issues/304
          this.images = data;
})

It worked.

4

Personally, I think God kills a kitten every time an Angular2 app programmer calls zone.run() manually. It’s papering over something fundamentally broken (in this case I suspect firebaseService). Have you tried using AngularFire2?

5

No I have not, but I did try without firebase at all, and the problem still persists, as @iignatov posted, the problem seens to be with Observables, and looking the other problems, not everyone is using firebase, so I do not think the problem is firebase.

6

That’s not the way I read it. It looks to me like it has to do with how Observables are created.

7

To elaborate: I don’t intend this as a personal attack on @diogocfernandes, but I strongly believe that application code should never ever concern itself with zones or ChangeDetectorRefs or any of that low-level framework business. That is a category error.

Yes, there are times that external sources of asynchronous objects like Observables and Promises are not aware of the Angular environment. That needs to be addressed at the library shim/API level or within the framework itself. If you’re doing it at the application level, you are setting yourself up for perpetual pain.

1 Like
8

Oh please, it’s fine.
I’ve changed Observables with ngFor in my explanation, what I should have said is that the problem doesn’t seen to be with firebaseService becase there are other issues not related, and since there is an open issue with zone.js (https://github.com/angular/zone.js/issues/304), I hope the firebaseService is not broken. Thanks

9

@diogocfernandes have you solved this issue? I believe I have the same, just trying to narrow it down a bit.