javascript - Ionic 2 - *ng用于值之间的随机洗牌

Question

我想在 div 元素 中显示引号，因此我想每 5 分钟更新一次该引号。但是当我在 html 中创建 *ngFor 时，它将显示数组的所有元素。有没有办法每 5 分钟在数组中显示随机选取的报价？

这是我创建数组的 ts 文件:

  public quotesArray: any[] = [];

  constructor(public navCtrl: NavController) {
    this.quotesArray.push('testQuote');
    this.quotesArray.push('testQuote2');
    this.quotesArray.push('testQuote3');
    this.quotesArray.push('testQuote4');
  }

这是 html:

<div *ngFor="let q of quotesArray; let i = index">{{ q }}</div>

如何每 5 分钟随机选择一个报价？

Answer 1

这就是*ngFor所做的，它迭代数组并在屏幕上打印在其中创建的html，次数与数组的长度相同。

如果您想一次只显示一个报价并每 5 分钟更新一次，您可以使用 setInterval() 方法来操作报价。

public quotesArray: any[] = [];
public randomQuote: string;

constructor(public navCtrl: NavController) {
  this.quotesArray.push('testQuote');
  this.quotesArray.push('testQuote2');
  this.quotesArray.push('testQuote3');
  this.quotesArray.push('testQuote4');

  // immediately show one random quote;
  this.quotesArray[Math.floor(Math.random() * this.quotesArray.length)];

  setInterval(() => {
    this.randomQuote = this.quotesArray[Math.floor(Math.random() * this.quotesArray.length)]; // this'll get the quote depending on your array length
  }, 300000); // needs to be in milliseconds
}

在你的 html 中你会有

<div>{{randomQuote}}</div>

正如 Daniel Cooke 所评论的，如果报价来自服务器，您可以每 5 分钟调用一次，只需在 setInterval 中实现代码即可。

希望这有帮助:D