Ionic 2 - *ngFor 值之间的随机洗牌

Question

我想在div element 中显示报价，因此我想每 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