我正在嘗試在 angular 中制作打字機效果

Question

我正在嘗試用 js 制作打字機

private i: number = 0;
  private text: string = "hello stack";
  private timer: number = 50;
  typeWriter() {
    console.log(this.text.length);
    console.log(this.i);
    if (this.i < this.text.length) {
      document.querySelector(".quotes").innerHTML += this.text[0];
      this.i++;
      setTimeout(this.typeWriter, this.timer);
    }
  }

像這樣的東西，但在打印 h 或第一次調用之后它給了我錯誤無法讀取未定義的屬性“長度”。 並且 i 的值也沒有更新。

Answer 1

您需要使用bind或箭頭 function 表示法在回調中使用this關鍵字來引用 class 成員變量。 如果不是， this關鍵字指的是function的scope。

嘗試以下

typeWriter() {
  console.log(this.text.length);
  console.log(this.i);
  if (this.i < this.text.length) {
    document.querySelector(".quotes").innerHTML += this.text[0];
    this.i++;
    setTimeout(this.typeWriter.bind(this), this.timer);
  }
}

或者

typeWriter() {
  console.log(this.text.length);
  console.log(this.i);
  if (this.i < this.text.length) {
    document.querySelector(".quotes").innerHTML += this.text[0];
    this.i++;
    setTimeout(() => this.typeWriter(), this.timer);
  }
}

另外， this.text this.text[0]不應該是this.text[this.i]嗎？ 此外，使用 Angular 時最好不要直接訪問 DOM。 您可以嘗試使用 Angular Renderer 。