Установите Интервал на массиве в угловом проекте - PullRequest
Новая
       9

Установите Интервал на массиве в угловом проекте

0 голосов
/ 31 января 2019

Я пытаюсь использовать функцию setInterval(), чтобы изменять текст для пользователя каждые 3 секунды.

Я пытался зацикливаться с циклом for, но это не работает - я вижу тест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 }}

Цените любую помощь!

Ответы [ 3 ]

0 голосов
/ 31 января 2019

Попробуйте это: 

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 }}
0 голосов
/ 31 января 2019

Если вы довольны 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

0 голосов
/ 31 января 2019

Попробуйте вместо этого.

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

}
...