如何在角度为2

时间:2016-07-29 14:06:20

标签: angular callback flexslider http-get

我需要一个接一个地获取2个json文件数据。这意味着我正在调用一个json文件,具体取决于收到的调用另一个json文件的数据。我已经这样做了。值得关注的是我需要初始化从第二个json文件接收的数据的flexsider。有人可以帮助我。



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
      );
    }
}
&#13;
&#13;
&#13;

&#13;
&#13;
@
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());
  }
}
&#13;
&#13;
&#13;

我不知道在哪里放置我的代码来初始化我的flexslider。在我的数据之前调用ngAfterViewInit。因此它不起作用。请有人可以告诉我吗?

1 个答案:

答案 0 :(得分:1)

我认为你得到数据后应该把它弄好!

  this.popService.getPopularProdData(id).then(

    popData => this.extractPopularProducts(popData)

下面

  );