For-Schleife zeigt nur zuletzt von Feuerbasis

Question

abgerufenen Daten

ich dies für Schleife, wo ich Benutzer den Fortschritt

Typoskript abrufen:

his.userProgress = af.object('/UserProgress/' + this.currentUser + '/', { preserveSnapshot: true }); 

    this.userProgress.subscribe(snapshots => { 
     snapshots.forEach(snapshot => { 
      this.userScores.push(snapshot.val()); 
     }); 
     console.log(this.userScores); 

     //set this one to i<=8 because total no. of quizzes are 9. which means this.userScores.length -1 
     for(var i=0; i <= 8; i++){ 
      if (this.userScores.length == i) { 
       this.scores = [{ 
        None: "Nothing Recorded" 
       }]; 
       console.log("Nothing"); 
      } 

      else if (this.userScores.length >= i) { 
       this.scores = [{ 
        Chapter:this.userScores[i].Chapter_Quiz, 
        QuizNo:this.userScores[i].Quiz, 
        Score:this.userScores[i].Score, 
       }]; 
       console.log("With Scores"); 
      } 
     } 

    }); 

Erstens, es prüft, ob die userScores ist [] Länge weniger 0 oder größer als oder gleich 0. Wenn es für dieses Quiz keine Punktzahl gibt, wird "Nichts aufgezeichnet" angezeigt, andernfalls wird die Punktzahl angezeigt.

HTML:

<ion-card> 

<ion-list *ngFor="let score of scores"> 
    <ion-card-header> 
    {{score.Chapter}} 
    </ion-card-header> 

    <button ion-item *ngIf="scores.length < 0"> 
    <ion-icon name="planet" item-start></ion-icon> 
    {{score.None}} 
    </button> 

    <button ion-item *ngIf="scores.length >= 0"> 
    <ion-icon name="planet" item-start></ion-icon> 
    {{score.Score}} 
    </button> 

</ion-list> 

ich Probleme mit bin, wo es nur der letzte Datensatz zeigt. Was mache ich falsch?

Erwartete Ausgabe:

If finished with the 1st quiz: 

1st: Score 
2nd: Nothing Recorded 
3rd: Nothing Recorded 
.... 


if no score at all: 
1st: Nothing Recorded 
2nd: Nothing Recorded 
..... 

Answer 1

Zuerst ändern Sie in jeder Iteration der Schleife den Wert in der Variablen this.scores, wenn Sie in Wirklichkeit dazu aufgefordert werden, die Daten der vorherigen Tests zu speichern.

Verwenden Sie stattdessen this.scores.push.

Sie könnten auch die Bedingung in der for-Schleife ändern und i < this.userScores.length verwenden, um es von der Länge des Arrays abhängig zu machen.

Dann ändern Sie die ngIf in der HTML, um zu überprüfen, ob score.Score existiert oder nicht. Wenn nicht, gibt es keine Punkte

Answer 2

Nun, aus dem Code es wie this.userScores.length = 9 scheint, ist immer größer als der Index i innerhalb der Schleife (i variiert nur 0-8). Daher wird für jede Schleifeniteration der letzte Block (else if Block) ausgeführt. Da Sie das Array this.scores nicht dynamisch ändern/hinzufügen, sondern nur dem Objekt selbst zuweisen (den Arrayindex für this.scores nicht ändern oder in die vorhandene this.scores Liste verschieben), wird der Wert in der aktuellen Iteration des this. userScores[i] Index gespeichert zu this.scores bei jeder Iteration. Bei der letzten Iteration hat der this.userScores[8] den Wert this.scores mit dieser Liste nur length = 1.

Macht Sinn?