Циклический просмотр массива и отображение только одного индекса контента за интервал времени (Angular 2+) - PullRequest
Новая
       10

Циклический просмотр массива и отображение только одного индекса контента за интервал времени (Angular 2+)

0 голосов
/ 25 июня 2018

Я пытаюсь найти лучший способ перебрать массив в Angular 2+ и отображать данные массива только каждые 10 секунд

, например 

phrase = ["Hello", "Yo", "Whats up?"];

<div *ngFor = "let p of phrase">
 {{p}}
<div>

Некоторый интервалвремя идет и отображает «Hello», затем удаляет «Hello», а затем показывает «Yo» и т. д. и т. д.

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

используйте метод javascript setInterval вместо ngfor

phrase = ["Hello", "Yo", "Whats up?"];

constructor(){ 
  this.timeOut();
}

  timeOut(){
     let count = 0;
     setInterval(() => {
       if(count === this.phrase.length ){
         count = 0;
       }
       this.name = this.phrase[count]
       count++
     },1000)
  }
}

Демо

0 голосов
/ 25 июня 2018

Очевидно, что есть много способов сделать это, но вы можете использовать, например, interval() из rxjs: 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'hello',
  template: `
    {{ phrase[index$ | async] }}
  `,
})
export class HelloComponent {
  phrase = ["Hello", "Yo", "Whats up?"];
  index$: Observable<number>;

  constructor() {
    this.index$ = interval(1000).pipe(
      map((item, index) => index % this.phrase.length),
    )
  }
}

Эта index$ будет каждую секунду генерировать индекс, указывающий, какую фразу печатать с phrase[index$ | async].

См. Демонстрацию: https://stackblitz.com/edit/angular-qtmdxp?file=src%2Fapp%2Fhello.component.ts

...