Ionic 2 - * ngFor zufällige Shuffle zwischen den Werten

Question

Ich möchte in einem div element Zitate zeigen, dabei möchte ich dieses Zitat alle 5 Minuten oder etwas aktualisieren. Aber wenn ich eine *ngFor im HTML-Format erstelle, werden alle Elemente des Arrays angezeigt. Gibt es eine Möglichkeit, alle 5 Minuten ein zufällig ausgewähltes Zitat im Array anzuzeigen?

Hier ist meine TS-Datei, wo ich das Array zu erstellen:

public quotesArray: any[] = []; 

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

und hier ist der html:

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

Wie kann ich ein zufälliges Zitat alle 5 Minuten wählen?

Answer 1

Dies ist, was *ngFor tut, es iteriert durch und Array und druckt auf dem Bildschirm die HTML erstellt in ihm die Anzahl der Male als die Länge des Arrays.

Wenn Sie nur ein Zitat auf einmal anzeigen und alle 5 Minuten aktualisieren möchten, können Sie die setInterval()-Methode verwenden, um das Angebot zu bearbeiten.

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 
} 

Und in Ihrem HTML finden Sie

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

Als Daniel Cooke kommentiert haben, wenn die Zitate von einem Server kommen Sie es alle 5 Minuten anrufen konnten, müssen nur den Code in das Gerät setInterval.

hoffe, das hilft: D