Свойство исчезает после достижения условия в setInterval ()

Question

У меня есть несколько промежутков, которые должны постепенно исчезать.Для этого я указал в HTML следующее:

<span class="word d-inline-flex" *ngFor="let word of words; let i = index">
      <span class="start-animation" [class.enter-animation]="i <= word$">{{word}}&nbsp;</span>
</span>

Интервал должен оставаться после анимации.

Для последовательного отображения:

word$ = 0;

ngAfterViewInit() {
    this.interval = setInterval( () => {
      this.word$ = this.word$ < this.words.length ? this.word$ + 1 : clearInterval(this.interval);
    }, 100);
}

Анимация работает, но пролеты снова исчезают.Изучив код с Огюри, я обнаружил, что после достижения длины слова свойство word$ исчезает - отсюда и проблема?

Дополнительно консоль возвращает:

ОШИБКА в src / app / front / text-top / text-top.component.ts (27,7): ошибка TS2322: Type 'номер |void 'не присваивается типу' number '.Тип 'void' нельзя назначить типу 'number'.

Answer 1

Это происходит потому, что вы изначально задали word$ = 0 типа number, а затем в троичном выражении задали его как выход clearInterval, который является void.

* 1006.* Я не знаю, как именно работает ваша анимация, но изменение кода на следующее может решить проблему.

Из этого:

this.word$ = this.word$ < this.words.length ? this.word$ + 1 : clearInterval(this.interval);

К этому:

if(this.word$ < this.words.length) {
   this.word$++;
} else {
   clearInterval(this.interval)
}