Wie initialisiert man flexslider auf http.get Callback-Daten in Winkel 2

Question

Ich muss 2 JSON-Dateien nacheinander abrufen. Das heißt, ich rufe eine JSON-Datei auf, abhängig von den empfangenen Daten, die eine andere JSON-Datei aufrufen. Das habe ich getan. Bedenken ist, dass ich einen flexsider auf Daten initialisieren muss, die von der zweiten json Akte empfangen werden. Kann mir jemand helfen.

export class popularProductsComponent implements OnInit, AfterViewInit { 
 
    public popProductIds: string[] = []; 
 
    public popProductData: Array <Object> ; 
 
    private sub: any; 
 
    public errorMessage: string; 
 
    constructor(
 
    private route: ActivatedRoute, 
 
    private popService: PopularDataService) {} 
 

 
    ngOnInit() { 
 
    console.log("@@@@@@@@@@@@@@@ popular-products.component ngOnInit"); 
 
    this.sub = this.route.params.subscribe(params => { 
 
     let id = +params['id']; 
 
     this.popService.getPopularProdData(id).then(
 
     //console.log("inCallbackroute") 
 
     popData => this.extractPopularProducts(popData) 
 
    ); 
 
    }); 
 
    } 
 

 
    ngAfterViewInit() { 
 
    // landing Most Popular for large devices 
 
    $('.js-landing-upper-carousel').flexslider({ 
 
     selector: '.slides:first > li', 
 
     animation: 'slide', 
 
     animationLoop: false, 
 
     slideshowSpeed: 3000, 
 
     animationSpeed: 500, 
 
     slideshow: false, 
 
     controlNav: false, 
 
     reverse: false, 
 
     itemWidth: 358, 
 
     itemMargin: 12, 
 
     minItems: 1, 
 
     maxItems: 3, 
 
     move: 1, 
 
     smoothHeight: false, 
 
     useCSS: false, 
 
     customDirectionNav: $('.promotions-carousel-navigation a') 
 
    }); 
 
    } 
 

 
    extractPopularProducts(popData) { 
 
     for (var i = 0; i < popData.MarketingSpotData[0].baseMarketingSpotActivityData.length; i++) { 
 
     this.popProductIds.push(popData.MarketingSpotData[0].baseMarketingSpotActivityData[i].productId); 
 
     } 
 
     this.popService.getPopularProductDetails(this.popProductIds).then(
 
     popData1 => this.popProductData = popData1, 
 
     error => this.errorMessage = <any> error 
 
    ); 
 
    } 
 
}

@ 
 
Injectable() 
 
export class PopularDataService { 
 
    constructor(private http: Http) {} 
 
    private popularProdUrl = '/assets/json-mocks/popular-prod.json'; 
 
    private popularProdDetailsUrl = '/assets/json-mocks/popular-prod-details.json'; 
 
    getPopularProdData(id: number): Promise < Array <Object>> { 
 
    // return; 
 
    console.log("popular-data.service.ts || getPopularProdData. id = " + id + " url = " + this.popularProdUrl); 
 
    return this.http.get(this.popularProdUrl).toPromise().then(response => response.json()); 
 
    } 
 
    getPopularProductDetails(popProductIds: string[]): Promise < Array <Object>> { 
 
    console.log("popular-data.service.ts || getPopularProductDetails. popProductIds = " + popProductIds + " url = " + this.popularProdDetailsUrl); 
 
    return this.http.get(this.popularProdDetailsUrl).toPromise().then(response => response.json()); 
 
    } 
 
}

Ich bin nicht sicher, wo mein Code setzen meine flexslider zu initialisieren. ngAfterViewInit wird vor meinen Daten aufgerufen. Daher funktioniert es nicht. Kann mir bitte jemand Rat geben?

Answer 1

Ich denke, Sie sollten es richtig stellen, nachdem Sie Ihre Daten erhalten haben!

this.popService.getPopularProdData(id).then(

    popData => this.extractPopularProducts(popData) 

HIER

);