Ionic-framework: ion-slides Cannot read property 'hasAttribute' of undefined

Created on 28 Mar 2017  路  8Comments  路  Source: ionic-team/ionic-framework

when use *ngFor ion-slides, get this error when start the page.

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
    at autoplay (swiper.js:175)
    at startAutoplay (swiper.js:218)
    at initSwiper (swiper.js:164)
    at Slides._initSlides (slides.js:851)
    at slides.js:517
    at SafeSubscriber.schedulerFn [as _next] (async.js:105)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitter.Subject.next (Subject.js:55)
    at EventEmitter.emit (async.js:79)
    at Array.<anonymous> (page-transition.js:23)
    at IOSTransition.Animation._fireBeforeReadFunc (animation.js:800)
    at IOSTransition.Animation._beforeAnimation (animation.js:729)

And in swiper.ts ,I see that
https://github.com/driftyco/ionic/blob/master/src/components/slides/swiper/swiper.ts#L206, did it's because the acitveindex is undefined,because when there no data in modal.the swiper is still no slide???
By the way , why the ion-slides remove the options, and use this.slides.attributes=value to modify some hidden options. The options of swiper is awsome, and use very well for us to custom the slides.

Most helpful comment

I have the solution:
Do like this

<ion-slides *ngIf="slideData && slideData.length" autoplay="5000" class="slideroption" pager="true"   loop="true" speed="300">
      <ion-slide   *ngFor="let slide of slideData">
                <img src="{{slide.imag}}" />
          </ion-slide>
    </ion-slides>

All 8 comments

Hello, thanks for using Ionic! Could you provide a repo that we can use to reproduce this issue?

Hello, thanks for using Ionic! I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/10830.

I have the solution:
Do like this

<ion-slides *ngIf="slideData && slideData.length" autoplay="5000" class="slideroption" pager="true"   loop="true" speed="300">
      <ion-slide   *ngFor="let slide of slideData">
                <img src="{{slide.imag}}" />
          </ion-slide>
    </ion-slides>

Thanks for the solution.
However the developers should definitely take a look at this case, it makes no sense that an empty array is illiterated.

@sayanbrainium : It didn't worked for me.
please provide me working solution , I am using it in below way




this is still broken, and these solutions do not work

@sayanbrainium: Your solution helps.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings