2017-04-05 16 views
1

私はHTTPリクエストを使って取得したデータから*ngForを動的に使用してIonic 2 Slidesコンポーネントのスライドを設定し、特定のスライドがアクティブに設定されるようにする必要があります。動的なスライド数のIonic 2 Slidesコンポーネントを作成する方法は、データを設定した直後にいくつかのスライドに移動しますか?

私が直面している問題は、コンポーネントがまだ更新されていないため、データを持つコンポーネントのプロパティを設定するときに、まだSlides.slideTo()を呼び出すことができず、適切なタイミングがわからないということですそれ。バインドできるSlidesコンポーネントにactiveSlideなどのプロパティも表示されません。

は、ここで私が試したもの記述するコードです:

<ion-slides> 
    <ion-slide *ngFor="let obj of myObjects"> 
    <div>{{ obj.title }}</div> 
    </ion-slide> 
</ion-slides> 

this.http.get('http://example.com', options) 
.toPromise() 
.then(response => { 
    this.myObjects = response.json() as MyObject[]; 
    this.currentObject = this.myObjects.find(obj => obj.is_selected); 

    // Get the index of the slide I want to set as active. 
    let index = this.myObjects.indexOf(this.currentObject); 

    // Set it as active -- doesn't work here, because this.slides isn't updated yet. 
    this.slides.slideTo(index, 0); 

    // I tried using ChangeDetectorRef.detectChanges() and looked at 
    // the length of slides, but it seems that it doesn't run change 
    // detection immediately. 
    // 
    // this.ref.detectChanges(); 
    // console.log(this.slides.length()) // returns 0 

    // Calling Slides.update() after the detectChanges() doesn't help. 
    // 
    // this.slides.update(); 
    // console.log(this.slides.length()) // still 0 

    // I tried setTimeout(callback, 0) to run this after the stack is empty 
    // and presumably the change detection has run, but still no dice. 
    // 
    // setTimeout(() => { 
    //  console.log(this.slides.length()); 
    // }, 0); // doesn't work 

    // What is interesting, but also a bit disturbing, is that setting 
    // the timeout to some other value sometimes returns a value 
    // indicating that a change detection has run and sometimes it's 
    // still 0. The longer the timeout, the more probable it runs after 
    // the change detection, but I noticed that up to 20ms I never got 
    // anything else than 0, but at 25ms I tend to get proper values 
    // (but not always). I'm running this on Android device with 
    // Visual Studio Code's default configuration "Run Android on device". 
    // 
    // setTimeout(() => { 
    // console.log(this.slides.length()); 
    // }, 25); // sometimes works 
}) 

私は状況のようなもののためにVue.nextTick()を使用するために使用されるVueのフレームワークではなく、setTimeout(callback, 0)として動作するようには思えない、どのように私はそれを処理する必要があります角2?

私はCordova 6.5.0でIonic 2.2.0(Angular 2.4.8)を使用しています。どんな洞察も大歓迎です。私は、関連するかもしれないイオン性の問題を発見した

UPDATE:https://github.com/driftyco/ionic/issues/6703

答えて

0

あなたはslideTo機能は、たとえば、期待どおりに動作します)(ionViewDidEnterの内側に電話をかける場合:

ionViewDidEnter(){ 
    this.slides.slideTo(this.index,0); 
    } 
関連する問題