동적 슬라이드 수의 이온 2 슬라이드 구성 요소를 데이터 설정 후 일부 슬라이드로 이동하는 방법은 무엇입니까?

Question

내가 HTTP 요청을 사용하여 얻은 데이터에서 동적으로 *ngFor을 사용하여 이오니아 2 슬라이드 구성 요소의 슬라이드를 설정하고 특정 슬라이드가 활성화되도록 설정해야합니다.

내가 직면 한 문제는 구성 요소가 아직 업데이트되지 않았기 때문에 데이터가있는 구성 요소의 속성을 설정할 때 여전히 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()을 사용하는 데 사용되는 뷰 프레임 워크로,하지만 setTimeout(callback, 0)으로 작동하지 않는 것, 어떻게 그것을 처리해야 각도 2?

나는 Cordova 6.5.0과 함께 Ionic 2.2.0 (Angular 2.4.8)을 사용하고 있습니다. 모든 통찰력은 매우 환영받을 것입니다. 내가 관련이있을 수 이오니아 문제를 발견했습니다

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

Answer 1

당신이 slideTo 기능은 예를 들어, 예상대로 작동합니다) (ionViewDidEnter의 내부에 전화를 걸 경우 :

ionViewDidEnter(){ 
    this.slides.slideTo(this.index,0); 
    }