[intialSlide] not working in ion-slides

Ionic Framework ionic-v3
1

intilSlide property od ion-slides is not working in my code …any ideas why??

home.html

<ion-slides [initialSlide]="initialSlide">
  <ion-slide *ngFor="let quest of ans | async">
      <ion-list radio-group [(ngModel)]="answer">
      <div>
        <ion-item> 
        {{quest.qHeading}}
       </ion-item>
      </div>
      </ion-list>
  </ion-slide>
  
</ion-slides>

home.ts

..
this.initalSlide =2;
..

Can anyone help me here…Thanks in advance.

2

You’re using an async pipe, which probably causes this. Since the items are coming in Async, the slides doesn’t know when it should set initialSlide. Do you really need the async pipe for loading up those questions?

3

BTW you’re missing a closing </ion-item>, perhaps that causes your issue (but i’d still go for the async)

4

just corrected it…
the above code is a cut down of a large code…

asyc is required otherwise it is throwing error.

5

Where does your data come from? Do you have to wait for an API call? What error are you getting without it?

6

Yes i am getting data from firebase databse.

This is the error which i am receiving on removing the async pipe

ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
7

Ah no okay. Use the async pipe then! Because the slides are generated dynamically, I don’t think the initialslide is going to work like this. I think you should call an update() on the slides component when you receive data. You can find it in the documentation over here:

1 Like
8

Thanks @luukschoen …again !! :grinning:
It works

adding this.slides.update() in ionViewDidLoad().

9

Haha you’re welcome, again.