时间戳

首页 > 解决方案 > 循环遍历数组并在时间间隔内仅显示一个内容索引（Angular 2+）

html - 循环遍历数组并在时间间隔内仅显示一个内容索引（Angular 2+）

问题描述

我正在尝试找到在 Angular 2+ 中循环遍历数组的最佳方法，并且仅每 10 秒显示一次数组的数据

例如

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

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

一段时间过去，显示“Hello”，然后删除“Hello”，然后显示“Yo”，依此类推。

标签： htmlangularloopsintervals

解决方案

显然有很多方法可以做到这一点，但您可以使用例如interval()from 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

推荐阅读