與動態數據使用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م إلا أنها حُجبت لعدم توفر متطلبات الفوز بها في 
     الأعمال المرشحة تلك السنة"}   
     ]; 
    } 

} 

這個數據來自服務我用它在股票組件Ticker組件代碼

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數據這個插件不運行良好，股票HTML

<!-- 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

您試圖在DOM應用easyTicker越來越可用DOM裏面之前。您可以等到該DOM使用ngAfterViewInit生命週期掛鉤填充*ngFor集合。 ngAfterViewInit Angular在初始化組件的視圖和子視圖後作出響應。在ngAfterViewInit生命週期鉤子中應用您的jQuery功能。在這種情況下，這裏ngAfterViewInit尤其適用，因爲您正在同步檢索收集。當你採用異步方式時，你必須以其他方式處理這種情況。

ngAfterViewInit(){ 

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

};