非同期タスクの後にJqueryを実行

Question

私のカルーセルを初期化した後、jQueryで "each"関数を実行します。しかし、ngOnInit（）関数では、私はカルーセルを初期化するために必要なデータを取得するためにhttp.getと非同期のタスクを持っています。

マイコード：

ngOnInit() { this.list(); $('.carousel').carousel(); }

list(): void { 
    this.http.get(`http://localhost:8082/api/list`) 
     .subscribe(response => { 
      this.c= response.json().data; 
     }, error => { 
      this.error = error; 
     }) 
} 

ngAfterViewInit() { 
    // Your jQuery code goes here 
    $('.carousel .item').each(function() { 
     var next = $(this).next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     for (var i = 0; i < 2; i++) { 
      next = next.next(); 
      if (!next.length) { 
       next = $(this).siblings(':first'); 
      } 

      next.children(':first-child').clone().appendTo($(this)); 
     } 
    }); 
} 

ザ・各機能は、お使いの非同期機能からの応答がまだないので、これは...

Answer 1

を実行されていません。応答を受け取った後で簡単に.each関数を呼び出すことができます。

list(): void { 
this.http.get(`http://localhost:8082/api/list`) 
    .subscribe(response => { 
     this.c= response.json().data; 
     // Your jQuery code goes here 
     $('.carousel').carousel(); 
     $('.carousel .item').each() .... 
    }, error => { 
     this.error = error; 
    }) 
} 

Answer 2

セマフォを使用してください。

には、グローバル変数switchがあります。

this.http.get(`http://localhost:8082/api/list`) 
    .subscribe(response => { 
     switch = 1; 
     this.c= response.json().data; 
    }, error => { 
     switch = 1; 
     this.error = error; 
    }) 

ngAfterViewInit() { 
    while(!switch) { 
    } 
    $('.carousel .item').each(... 
} 

そして、非同期呼び出しが終了するまで、このような小さな遅延ループで各メソッドが実行されないようにしてください。