Блог

Главная - Вопросы по программированию - Использование текстового метода в TweenLite show undefined

Использование текстового метода в TweenLite show undefined

#javascript #jquery #angular #typescript #gsap

#javascript #jquery #угловой #typescript #gsap

Вопрос:

Я использую анимацию зеленого носка, в настоящее время я создаю прогресс загрузки и добавляю счетчик процентов, пример:-https://codepen.io/linxlatham/pen/aWJaXp

Я использую эту ссылку для справки, чтобы показать счетчик процентов, но используя текстовый метод, показать неопределенное

HTML: 

 <div class="loader">
  <div class="loader-border">
      <div class="progress" [ngStyle]="{'width': '0%'}">
        <div class="progress-text">
            <p id="count"><p>
        </div>
      </div>
  </div>
</div>

код:

   progres: any;
  width: string;
  count: any;
  tween: any;
  newPercent: any;
  constructor() {}
  ngOnInit() {
    this.progres = document.getElementsByClassName('progress')[0];
    this.count = document.getElementById('count');
    this.tween = new TweenLite(this.progres, 10, {
      width: '100%',
      ease: Linear.easeNone,
      onUpdate: () => {
        this.newPercent = (this.tween.progress() * 100).toFixed();
        console.log(this.count.innerHTML = this.newPercent   '%');
        console.log('-----'   this.count.text()); //show undefined 
      }
    });
  }

но он отлично работает с использованием innerHTML, пожалуйста, скажите, делаю ли я что-то неправильно.

Комментарии:

1. @Sajeetharan this.count является объектом html

2. text() — это метод jQuery.

3. @Ritesh является ли innerHTML хорошим вариантом

4. ДА. Но я бы рекомендовал вам не запрашивать DOM напрямую, а делать это угловым способом. Если вы хотите, я могу опубликовать это в качестве ответа

5. пожалуйста, добавьте @Ritesh

Ответ №1:

Запрашивать DOM в Angular не рекомендуется. Вам нужно сделать это угловым способом.

Сначала вам нужно указать ссылочную переменную пользовательского шаблона, чтобы вы могли ссылаться на них в своем компоненте. Ссылочные переменные шаблона имеют префикс #.

  <div class="loader">
      <div class="loader-border">
          <div class="progress" [ngStyle]="{'width': '0%'}" #progress>
            <div class="progress-text">
                <p id="count" #count><p>
            </div>
          </div>
      </div>
    </div>

Теперь в вашем компоненте вам нужно импортировать ViewChild и ElementRef и использовать их, как показано ниже:

   progres: any;
  width: string;
  count: any;
  tween: any;
  newPercent: any;
  @ViewChild('count') count: ElementRef;
  @ViewChild('progress') count: ElementRef;
  constructor() {}
  ngOnInit() {
    this.progres =  this.progress.nativeElement;
    this.count = this.count.nativeElement;
    this.tween = new TweenLite(this.progres, 10, {
      width: '100%',
      ease: Linear.easeNone,
      onUpdate: () => {
        this.newPercent = (this.tween.progress() * 100).toFixed();
        this.count.nativeElement.innerHTML = this.newPercent   '%');
      }
    });
  }