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

Posted 2023-03-13

【中文标题】Ionic 2 - *ngFor 值之间的随机洗牌

【英文标题】：Ionic 2 - *ngFor random shuffles between values

【发布时间】：2017-10-15 18:02:00

【问题描述】：

我想在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 分钟随机选择一次报价？

【问题讨论】：

假设您的报价来自服务器，为什么不每 5 分钟发送一次 http 请求以获取新报价？

它们现在不是来自服务器。

【参考方案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

【讨论】：

但这不会立即显示值，它只显示5分钟后的值。所以值必须显示，然后在 5 分钟后更改

编辑了答案，马上给变量一个引号