Css 将jQuery代码迁移到angular 6时出现问题

我尝试在angular-6应用程序（已安装jQuery）中创建此时钟

我正试图在.ts文件代码中画几个小时，如下所示：

  createClock() {
    var li = document.createElement("li");
    var radius = 6;
    var clockEl =  this.clock.nativeElement
    $(document).ready(function() {
      for(var i=0; i<60; i++) {
        var li = document.createElement("li");
        clockEl.append(li);
      }

    });

createClock（）{
var li=document.createElement（“li”）；
var半径=6；
var clockEl=this.clock.nativeElement
$（文档）.ready（函数（）{
对于（var i=0；i您想做的事情可以通过Angular单独完成。但是如果您想使用jquery及其已安装的工具，请使用您可以通过

import * from 'jquery';
(or)
declare var $: any;

另外，请确保将其添加到angular.json中

“scripts”：[“./node\u modules/jquery/dist/jquery.min.js”]
好的。我删除了jquery并将所有代码转换为TS

import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-clock',
  template: `<div class="whole-page vertical-middle">
  <div class="vertical-middle__child">     
    <div class="clock">
      <ul class="clock__marks">
          <li *ngFor="let number of numbers"></li>
        </ul>      
      <div class="clock__hands">
        <div #clockHour class="clock__hand clock__hand--hour"></div>
        <div #clockMinute class="clock__hand clock__hand--minute"></div>
        <div #clockSeconds class="clock__hand clock__hand--second"></div>
      </div>      
    </div>

  </div>
</div>`,

  styleUrls: ['./clock.component.scss']
})
export class ClockComponent implements OnInit {
  @ViewChild('clockHour') clockHour: ElementRef
  @ViewChild('clockMinute') clockMinute: ElementRef
  @ViewChild('clockSeconds') clockSeconds: ElementRef

  public numbers = [];
  private radius = 6;

  constructor(private el: ElementRef,
    private renderer: Renderer2) {

    this.clockHour = el.nativeElement;
    this.clockMinute = el.nativeElement;
    this.clockSeconds = el.nativeElement;
    this.numbers = Array(60).fill(1);
  }

  ngOnInit() {
    this.createClock()
  }


  createClock() {
    const currentTime = new Date();
    const second = currentTime.getSeconds() * this.radius;
    const minute = currentTime.getMinutes() * this.radius + Math.floor(second / (this.radius * 10) * 10) / 10;
    const hour = currentTime.getHours() * this.radius * 5 + Math.floor(minute / (this.radius * 2) * 10) / 10;

    this.setClockHands(second, minute, hour)
  }

  setClockHands(second, minute, hour) {
    this.renderer.setStyle(this.clockSeconds.nativeElement, 'transform', 'rotate(' + second + 'deg)')
    this.renderer.setStyle(this.clockMinute.nativeElement, 'transform', 'rotate(' + minute + 'deg)')
    this.renderer.setStyle(this.clockHour.nativeElement, 'transform', 'rotate(' + hour + 'deg)')

    const interval = 1000; //1 second
    let before = new Date();


    setInterval(() => {
      const now = new Date();
      const elapsedTime = now.getTime() - before.getTime(); //Fix calculating in inactive tabs
      const delay = Math.round(elapsedTime / interval);

      second += this.radius * delay;
      for (var i = 0; i < delay; i++) {
        if (((second - i) * this.radius) % (this.radius * 5) === 0) {
          minute += 0.5;
          if (minute % this.radius === 0) {
            hour += 0.5;
          }
        }
      }

      this.renderer.setStyle(this.clockSeconds.nativeElement, 'transform', 'rotate(' + second + 'deg)')
      this.renderer.setStyle(this.clockMinute.nativeElement, 'transform', 'rotate(' + minute + 'deg)')
      this.renderer.setStyle(this.clockHour.nativeElement, 'transform', 'rotate(' + hour + 'deg)')
      before = new Date();
    }, interval);
  }
}

从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef，renderr2}；
@组成部分({
选择器：“应用程序时钟”，
模板：`



`,
样式URL:['./clock.component.scss']
})
导出类ClockComponent实现OnInit{
@ViewChild（'clockHour'）clockHour:ElementRef
@ViewChild（'clockMinute'）clockMinute:ElementRef
@ViewChild（'clockSeconds'）clockSeconds:ElementRef
公众号码=[]；
私人半径=6；
建造商（私人el:ElementRef，
专用渲染器：渲染器2）{
this.clockHour=el.nativeElement；
this.clockMinute=el.nativeElement；
this.clockSeconds=el.nativeElement；
this.numbers=数组（60）.fill（1）；
}
恩戈尼尼特（）{
这是createClock（）
}
createClock（）{
const currentTime=新日期（）；
const second=currentTime.getSeconds（）*this.radius；
const minute=currentTime.getMinutes（）*this.radius+数学楼层（秒/（this.radius*10）*10）/10；
const hour=currentTime.getHours（）*this.radius*5+数学楼层（分钟/（this.radius*2）*10）/10；
这个。设置时钟指针（秒、分钟、小时）
}
setClockHands（秒、分钟、小时）{
this.renderer.setStyle（this.clockSeconds.nativeElement，'transform'，'rotate（'+second+'deg'））
this.renderer.setStyle（this.clockMinute.nativeElement，'transform'，'rotate（'+minute+'deg'））
this.renderer.setStyle（this.clockHour.nativeElement，'transform'，'rotate（'+hour+'deg'））
常数间隔=1000；//1秒
let before=新日期（）；
设置间隔（（）=>{
const now=新日期（）；
const elapsedTime=now.getTime（）-before.getTime（）；//修复非活动选项卡中的计算
const delay=数学轮（elapsedTime/间隔）；
秒+=这个半径*延迟；
对于（变量i=0；i

感谢您的帮助
有控制台错误吗？如果您使用的是Angular，为什么不直接将值附加到数组中，然后改用
*ngFor
？手动创建DOM元素在Angular应用程序中几乎从来都不是正确的答案。@JohnMontgomery，其中几乎从不是0.00001%的情况；）如果必须在angular中使用jquery，则说明您没有正确使用angular