Почему мой текст не обновляется в моем HTML, хотя он изменяется в моем .ts? Как мне это исправить? ⇐ Html

[Anonymous]

Я пытаюсь создать всплывающее окно терминала, которое печатает сообщение и затем перенаправляет его. Терминал всплывает, курсор виден, но сообщение не печатается. Я отлаживал его несколько раз и вижу, что сообщение заполняется буква за буквой. Я пытался изменить свой подход и использовать AsyncPipe, но это тоже не сработало.
Вот мой файл login.ts

Код: Выделить всё

import { Component, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { Navigation } from '../../shared/navbar/navigation';

@Component({
selector: 'app-login',
standalone: true,
imports: [Navigation, CommonModule],
templateUrl: './login.html',
styleUrl: './login.scss',
})
export class Login {

isLoggingIn = false;

showTerminal = false;
terminalText = '';

fullMessage = "> AUTHENTICATION CONFIRMED.\n> DECRYPTING USER PROFILE...\n> ACCESS GRANTED.\n> INITIALIZING IDE...";

constructor(private router: Router, private cdr: ChangeDetectorRef) { }

startLogin() {
if (!this.isLoggingIn) {
this.isLoggingIn = true;
}
}

onAnimationFinish(event: AnimationEvent) {
this.showTerminal = true;
this.startTyping();
}

startTyping() {
let index = 0;
this.terminalText = '';

const typingInterval = setInterval(() => {
this.terminalText += this.fullMessage[index];
index++;
console.log("Typing:", this.terminalText);
this.cdr.detectChanges();

if (index === this.fullMessage.length) {
clearInterval(typingInterval);

setTimeout(() => {
this.router.navigate(['home']);
}, 1000);
}
}, 40);
}
}

Вот HTML для отображения текста:

Код: Выделить всё

@if (showTerminal) {



{{ terminalText }}_



}

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... -ts-how-do