所以我在显示或隐藏元素时遇到了一些逻辑问题。
我有这个功能来显示或隐藏“span”元素，通过它我可以在每个文本上显示不同的颜色。

startWritting() {
// const spanOne = <HTMLInputElement>document.getElementById('one');
// const spanTwo = <HTMLInputElement>document.getElementById('two');
// const spanThree = <HTMLInputElement>document.getElementById('three');
// const spanFour = <HTMLInputElement>document.getElementById('four');

const durCharFwd = 0.1; // character typed
const durFullGap = 2000; // time between typed/delete
const durCharBwd = 0.8; // character deleted
const durDoneGap = 1000;
let strings = ['Your value', 'Organic', 'Gluteen-free', 'Fair-trade'];
let durTotal;
setInterval(() => {
  strings.forEach((string, i) => {
    durTotal =
      string.length * (durCharFwd + durCharBwd) + durFullGap + durDoneGap;
    setInterval(() => {
      this.elements.forEach((el, index) => {
        if (index === i) {
          el.isSelected = true;
        } else {
          el.isSelected = false;
        }
      });
    }, durTotal);
  });
}, durTotal);

}
这是我的HTML代码

<ng-container *ngFor="let el of elements">
        <span
          *ngIf="el.isSelected"
          [id]="el.id"
          class="animated-text"
        ></span>
      </ng-container>

顺便说一下，这是编辑元素的打字动画，因为你可以看到完整的html和css动画代码在这里https://codepen.io/matadantelinga/pen/ExQeqjj我想知道，如果有人在这里可以建议我的逻辑？