代码之家 › 专栏 › 技术社区 › Federico Gentile

如何在数组中无限循环并以角度显示值?

components while-loop typescript angular javascript

0

Federico Gentile · 技术社区 · 3 年前

我有一个单词数组,我的目标是每隔几秒钟在HTML模板中显示每个单词。结果应该是这样的: https://bootstrapmade.com/demo/iPortfolio/

我知道通过使用以下JavaScript代码可以做到这一点:

  const typed = select('.typed')
  if (typed) {
    let typed_strings = typed.getAttribute('data-typed-items')
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 2000
    });
  }

我尝试使用typescript复制相同的效果,并编写了以下代码:

export class HeroComponent implements OnInit {

  words: string[] = ['marco', 'polo'];
  word: string = "";
  constructor() { }

  ngOnInit(): void {
    setTimeout(() => {
    while(true){
      for (let i=0; i < this.words.length; i++) {
        setTimeout(() => {
        this.word = this.words[i];
        console.log(this.word)
      }, 4000)
      };
    }}, 4000);
  }
}

然而,一旦我运行该网站,它就会说内存不足。

您能否建议一种巧妙而优雅的方式来实现上述网站中链接的效果?

1 回复 | 直到 3 年前

1

3

Chris Hamilton 3 年前

这样做的方法是:

import { map, timer } from 'rxjs';

@Component({
  ...
})
export class HeroComponent {
  words = ['marco', 'polo'];
  word = timer(0, 4000).pipe(
    map((num) => {
      const index = num % this.words.length;
      const word = this.words[index];
      console.log(word);
      return word;
    })
  );
}

然后在html中使用异步管道:

<p>{{ word | async }}</p>

示例: https://stackblitz.com/edit/angular-ivy-7xbuft?file=src/app/app.component.ts

timer 从RxJS以递增的顺序(0、1、2、3,…)发出整数从第一个参数(0ms)开始,然后在第二个参数(4000ms)给定的间隔内进行一次。

pipe 让我们在返回之前对任何发出的值执行一系列操作。

map 获取发出的值并返回不同的值,在本例中,我们使用整数计算数组的索引,然后在该索引处返回单词。

这个 async 管道将订阅可观察到的,并在组件被销毁时取消订阅,从而停止执行。取消订阅对于防止内存泄漏很重要。