Как правильно выполнять рекурсию внутри foreach l oop с помощью машинописного текста?

Question

Сценарий

Я пытаюсь создать собственный эффект набора текста Вот так с задержкой 100 мс в angular.

Ниже мой машинописный код:

private arr: string[] = ["Lead Developer (.NET)", "Full Stack (.NET) Developer", "Freelancer"];
private typewriter_text: string = "";
private typewriter_display: string = ""; 

ngOnInit() {
    this.typingInitiating(this);
  }

  typingInitiating(that) {
    this.arr.forEach(element => {
      that.typewriter_text = element;
      this.typingCallback(that);
    });
  }

  typingCallback(that) {
    if (this.typewriter_display.length < that.typewriter_text.length) {
      this.typewriter_display += that.typewriter_text[this.typewriter_display.length];  
      setTimeout(that.typingCallback, 100, that);
    }
    else {
      for (let i = that.typewriter_text.length; i >= 0; --i) {
        this.typewriter_display = that.replaceAt(that.typewriter_text, i,that.typewriter_text.length - i);
        console.log(this.typewriter_display)
      }
    }
  }

  replaceAt(text: string, index: number, charcount: number): string {
    return text.substr(0, index) + text.substr(index + charcount);
  }

В моем компоненте приложения. html:

{{typewriter_display }}

Live Stackblitz

Я столкнулся с ошибка в консоли:

https://stackblitz.com/edit/angular-rqtvoz

Я хочу знать, почему моя рекурсия не работает должным образом.

Answer 1

this теряется в вашей функции и не относится к самому объекту. Каждая созданная функция имеет свой this. Нам нужно будет изменить его на Arrow function , потому что он не связывает свое собственное this.

typingCallback = (that:any) => {

 if (this.typewriter_display.length < that.typewriter_text.length) {
  this.typewriter_display += 
  that.typewriter_text[this.typewriter_display.length];  
  setTimeout(that.typingCallback, 100, that);
}
else {
  for (let i = that.typewriter_text.length; i >= 0; --i) {
    this.typewriter_display = that.replaceAt(that.typewriter_text, 
   i,that.typewriter_text.length - i);
     console.log(this.typewriter_display)
   }
 }

};