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);
}

动画有效，但是跨度再次消失。使用Augury检查代码后，我发现达到字长后，属性word$消失了-因此出现了问题吗？

此外，控制台返回：

src / app / front / text-top / text-top.component.ts（27,7）中的
ERROR：错误TS2322：键入'number |无效”不能分配给“数字”类型。不能将“ void”类型分配给“ number”类型。

Answer 1

之所以会发生这种情况，是因为您最初将word$ = 0设置为number类型，然后在三元语句中将其设置为clearInterval的输出，即{{1 }}。

我不知道您的动画的工作原理如何，但是将代码更改为以下代码可能会解决问题。

从此：

void

对此：

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

在setInterval（）中达到条件后属性消失

1 个答案: