Settimeout не запускает обнаружение изменений в моем угловом коде ⇐ Javascript

[Anonymous]

Я новичок в Angular, поэтому поправьте меня, если я ошибаюсь в каком-либо пункте, поэтому изначально я пытался создать службу тостов для моего проекта e-com, это был мой код ниже .... есть массив тостов и функция добавления. мы можем передать сообщение в функцию добавления, оно поместит его во внешний интерфейс массива тостов, отобразит его, и запустится settimeout, и через 5 секунд сообщение будет удалено из массива тостов, cd сработает из-за settimeout, и внешний интерфейс перестанет отображать mssg

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

// toast.service.ts
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})

export class ToastService {

toasts: { message: string; duration: number; type: 'success' | 'error' }[] = [];

add(message: string, duration: number = 3000, type: 'success' | 'error' = 'success') {
this.toasts.push({ message, duration, type });
setTimeout(() => this.remove(0), duration);
}

remove(index: number) {
this.toasts.splice(index, 1);
}
}

но проблема заключалась в том, что после завершения settimeout всплывающее сообщение было удалено из массива, но сообщение все еще отображалось на моей странице....

позже я использовал сигналы, и эта проблема решена

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

@Injectable({
providedIn: 'root',
})
export class ToastService {
toasts = signal([]);

create(message: string, type: AlertType): void {

const toastItem: ToastInfo = { message, type };

this.toasts.update(t => [...t, toastItem]);

of(toastItem)    //creating a observale
.pipe(delay(5000)) // inserting into pipe
.subscribe(()=>{
this.remove(toastItem) //emitting
})
}
remove(value: ToastInfo){
this.toasts.update(t => t.filter(item => item !== value));
console.log(this.toasts);
}
}

мой вопрос: почему не работает settimeout. angular запустит свой компакт-диск после завершения setimeout, тогда массив будет пустым и не будет сообщения для рендеринга...

Подробнее здесь: https://stackoverflow.com/questions/798 ... gular-code