如何在Angular 7中使用FlipClock Js

时间:2018-12-27 12:36:40

标签: jquery html angular

我在我的Angular 7项目中使用了flipclock,但是不知何故。任何人都可以分享相同的示例。

错误显示:错误类型错误:jquery__WEBPACK_IMPORTED_MODULE_3 __(...)。FlipClock不是函数

我正在使用 npm install flipclock --save 这个命令来安装flipclock

HTML代码

<div>
     <div class="clock"></div>
</div>

角组件文件

import { Component, OnInit ,ElementRef} from '@angular/core';
import { ApicallService } from '../apicall.service';
import * as $ from 'jquery';

@Component({
    selector: 'app-agent-mainpage',
    templateUrl: './agent-mainpage.component.html',
    styleUrls: ['./agent-mainpage.component.css']
})
export class AgentMainpageComponent implements OnInit {
    resp: any; // This is use for take res. from ajax call
    public paidList: any = [];
    public serverTime: any;

    constructor(private apiCall: ApicallService,public elementRef:
    ElementRef) { }

    ngOnInit() {

        this.getCustoimerDetalis();
    }

    getCustoimerDetalis() {
        let paidURL = 'auctions?userType=paid&Status=open&tvShow=0';
        this.apiCall.getApiCall(paidURL ).subscribe(res => {
            this.resp = res;
            if (this.resp.status === 'success') {
                this.paidList= this.resp.data;
                this.serverTime = this.resp.serverTime;


                var clocks = [];
                for (var i = 0; i<= this.paidList.length; i++ )
                {
                    //var clock =  $('.clock');
                    var clock = $(this.elementRef).FlipClock({
                        countdown: true,
                        clockFace: 'DailyCounter',
                    });
                    clock.setTime(this.paidList[i].endDate);
                    clock.setCountdown(true);
                    clock.start();
                    clocks.push(clock);

                }


            }
        },
        err => {
            console.log(err.message);
        }
        )
    }}

显示翻转时钟

0 个答案:

没有答案