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

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

components while-loop typescript angular javascript

Federico Gentile · 技术社区 · 2 年前

我有一个单词数组,我的目标是每隔几秒钟在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 回复 | 直到 2 年前

Chris Hamilton 2 年前

这样做的方法是:

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 管道将订阅可观察到的,并在组件被销毁时取消订阅,从而停止执行。取消订阅对于防止内存泄漏很重要。

推荐文章

uncle.T · 我在哪里可以有一个“cout”来获得输出

2 年前

Dimitriy Glefa · 返回和运行时

2 年前

oshiono · 循环以删除bash中数据集中的倒逗号(“”)

2 年前

Ekaterina Chistyakova · SQL,如何在while循环中正确求和并按周数将其写入表

2 年前

Eric D · while循环如何知道移动到下一个信息块?

2 年前

BigO · 单词积分游戏不断增加数字[关闭]

2 年前

ilteris · 为什么程序在fscanf后崩溃

2 年前

skysthelimit91 · 从python while循环中获得奇怪且意外的输出

2 年前

Baraa · 而我在java中得到无限的while循环

2 年前

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

2 年前