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'
        }
      });


   }

  }

我希望在ticker html中使用这个自动收录器列表来呈现这个动态数据，当我使用jquery插件和数据时它运行良好并且没有问题但是当我渲染动态数据时这个插件运行不好和股票代码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中使用它。你可以等到DOM使用*ngFor生命周期钩子填充ngAfterViewInit集合。 ngAfterViewInit在Angular初始化组件的视图和子视图后进行响应。在ngAfterViewInit生命周期钩子中应用你的jQuery函数。具体来说，ngAfterViewInit在这种情况下运行良好，因为您正在同步检索集合。当你遵循异步方式时，你必须以其他方式处理这种情况。

ngAfterViewInit(){

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

};

使用带有动态数据的jquery插件来自angular4

1 个答案: