Question

我正在尝试使用setInterval()函数，以便每3秒向用户更改一次文本。

我尝试使用for循环进行循环操作，但这不起作用-我看到的是“ test 03”，就是这样。

我找不到解决方法。

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private interval;

  constructor() {}

  ngOnInit() {
    for (let i = 0; i < this.items.length; i++) {
      this.interval = setInterval(() => {
        this.currentItem = this.items[i];
      }, 3000);
    }
  }
}

{{ currentItem }}

感谢任何帮助！

Answer 1

以这种方式尝试。

pointer指向您要显示的当前内容。每间隔一个指针，指针将增加1直到其值>2。然后再次从0开始。

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private pointer: number = 0;

  constructor() {}

  ngOnInit() {
      this.interval = setInterval(() => {
        this.currentItem = this.items[this.pointer];
        this.pointer++;
        if (this.pointer > 2) { this.pointer = 0 };
      }, 3000);
  }

}

Answer 2

尝试一下：

export class MessagesComponent implements OnInit {
  items = ['test 01', 'test 02', 'test 03'];
  currentItem: any;
  private interval;

  constructor() {}

  ngOnInit() {
    for (let i = 0; i < this.items.length; i++) {
      this.interval = setInterval(() => {
        this.currentItem = this.items[i];
      }, 3000 * i);
    }
  }
}

{{ currentItem }}

Answer 3

如果您对rxjs满意，

import { timer } from 'rxjs';
import { tap } from 'rxjs/operators';

ngOnInit() {
  timer(0, 3000)
    .pipe(
      tap(v => {
        this.currentItem = this.items[v%3]
      })
    )
    .subscribe(console.log);
}

更少的代码，没有循环，没有花哨的逻辑：）

您可以通过

做得更好

export class MessagesComponent implements OnInit {
  private timer$ = timer(0, 3000);
  ngOnInit() {
    // for loop can be completely removed
  } 
}

并在html中使用

{{ items[(timer$ | async) % 3] }}

因此，您实际上只需使用1行代码就可以利用异步管道和rxjs来完成相同的操作，而不必理会丑陋的for循环。

演示https://stackblitz.com/edit/angular-m5prrk?file=src%2Fapp%2Fapp.component.ts

在角度项目中的数组上设置间隔

3 个答案: