사용하여 jQuery 플러그인은 angular4

Question

내가 최근 사용 angular4에 서비스에서오고 난 시세의 데이터가 angular4 에 시세 서비스에서 제공 시세 시세 서비스 코드가

import { Injectable } from '@angular/core'; 

@Injectable() 
export class TickerService { 

    constructor() { } 
    getTickerList() 
    { 
     return[{img:"../../assets/images/profile-pics.jpg",title:"Added New 
     Post-1",des:"كما يشترط فيها أن تحقق هدفاً أو أكثر من الأهداف 
      الخاصة بالجائزة وفق تقدير اللجنة. كان من المقرر منح أول جائزة 
    منها سنة 1399هـ/1979م إلا أنها حُجبت لعدم توفر متطلبات الفوز بها في 
     الأعمال المرشحة تلك السنة"}, 
     {img:"../../assets/images/profile-pics.jpg",title:"Added New Post- 
     2",des:"كما يشترط فيها أن تحقق هدفاً أو أكثر من الأهداف الخاصة 
     بالجائزة وفق تقدير اللجنة. كان من المقرر منح أول جائزة منها سنة 
     1399هـ/1979م إلا أنها حُجبت لعدم توفر متطلبات الفوز بها في 
     الأعمال المرشحة تلك السنة"}   
     ]; 
    } 

} 

되어 있는지 확인하려면이 데이터에서 서비스 나는 티커 구성 요소를 사용하지 티커 구성 요소 코드는

import { TickerService } from './ticker.service'; 
    import { Component, OnInit } from '@angular/core'; 
    declare var jquery:any; 
    declare var $ :any; 
    declare var easyTicker : any; 
    @Component({ 
     selector: 'app-ticker', 
     templateUrl: './ticker.component.html', 
     styleUrls: ['./ticker.component.css'], 
     providers:[TickerService] 
    }) 
    export class TickerComponent implements OnInit { 
    public tickerList; 
    constructor(private service:TickerService) { } 

    ngOnInit() { 
    this.tickerList = this.service.getTickerList(); 
    //easy ticker is jquery plugin function and i selsct the class of div that will be content ticker data 
    $('.ticker1').easyTicker({ 
     direction: 'up', 
     easing: 'swing', 
     speed: 'slow', 
     interval: 500, 
     height: '200px', 
     visible: 0, 
     mousePause: 1, 
     controls: { 
      up: '', 
      down: '', 
      toggle: '', 
      playText: 'Play', 
      stopText: 'Stop' 
     } 
     }); 


    } 

    } 

내가이 동적 데이터를 렌더링하는 시세의 HTML에서이 종목리스트를 사용하려는 내가 데이터와 jQuery 플러그인을 사용할 때 잘 실행하고 더있다 문제가 있지만 내가 dy를 렌더링 할 때 이 플러그인이 잘 실행되지 않습니다 NAMIC 데이터와 당신은 그것이 DOM 내에서 사용할 수 얻기 전에 DOM을 통해 easyTicker을 적용하려고하는

<!-- start of ticker --> 
<div class="menu-div"> 
<div class="title-panel black15"> 
    What's going on 
</div> 
<!-- Start of ticker -->  
<div class="ticker1"> 

    <div class="ticker-menu black15 " style=" overflow-y: auto;" *ngFor= "let list of tickerList">  
       <div class="ticker-menu-item"> 
        <div class="thumb-profile-img"> 
         <a href="#"><img class="img-circle-50" src="{{list.img}}"></a> 
        </div> 
        <div> 
         <a href="#" class="black15">{{list.title}}</a> 
         <p class="truncation gray15">{{list.des}} 
         </p> 
        </div> 
     </div> 
</div> 
    </div> 

Answer 1

으로 선정 된 HTML. ngAfterViewInit lifecycle hook을 사용하여 DOM에 *ngFor 콜렉션이 채워질 때까지 기다릴 수 있습니다. ngAfterViewInit Angular 이후에 응답하면 구성 요소의보기 및 하위 뷰가 초기화됩니다. 수명주기 후크 내에서 jQuery 함수를 ngAfterViewInit에 적용하십시오. 특히 ngAfterViewInit은이 경우 컬렉션을 동 기적으로 가져 오기 때문에 제대로 작동합니다. 비동기 방식을 따르고있을 때는이 상황을 다른 방식으로 처리해야합니다.

ngAfterViewInit(){ 

    $('.ticker1').easyTicker({ 
     .... 
    }); 

};