I'm trying to create a memory game where an expanding list of numbers is shown in ionic and angular and the user has to type in the answer

Question

The way that I am doing it is that I want each of the numbers to appear then disappear. I have tried a lot of options but only the last number ends up showing when there are two or more numbers in the array. I suspect it has something to do with the for loop, but there does not seem to be a way around it. Here is my typescript code for the generate numbers function:

  generateNumbers() {
    let numbersArray = new Promise<number[]>((resolve, reject) =>  {
      let numberArray: number[] = []
      for (let i = 0; i < this.level; i++) {
        this.animationCtrl.create()
        .addElement(this.currentNum.nativeElement)
        .duration(500)
        .iterations(1)
        .fromTo('opacity', '1', '0.05').play()
        .then(func => {
          let randomnum = Math.floor(Math.random() * 9)
          numberArray.push(randomnum)  
          this.currentIndex = i  
          this.currentNumber = randomnum
          this.parsedCurrentNumber = JSON.parse(JSON.stringify(this.currentNumber))
        }).then(func => {
          this.animationCtrl.create()
          .addElement(this.currentNum.nativeElement)
          .duration(500)
          .iterations(1)
          .fromTo('opacity', '0.05', '1').play()
        }).then(func => {
          if (i === this.level - 1) {
            resolve(numberArray)
          }
        })
      }
  })
  return numbersArray
  }

Here are my variable declarations and injections:

  @ViewChild('currentNumber', { read: ElementRef, static: true}) currentNum: ElementRef;
  level: number = 1;
  levelExp: number = 1;
  gameHasBegun = false;
  paused = false;
  numbersArray: number[] = [];
  answer: string;
  wrongcount: number = 0;
  wrong = false;
  lost = false;
  currentIndex: number = 0
  currentNumber: number;
  parsedCurrentNumber: string;
  constructor(
    private router: Router,
    private menu: MenuController,
    private animationCtrl: AnimationController ) { }

Here is how I call my generate function:

    this.generateNumbers().then(
      (val) => this.numbersArray = val
    )

Here is my HTML Code for the part where the numbers should be shown, but instead only one number is shown when I have two or more numbers in my array:

<ion-content #currentNumber>
  <ion-label  class="ion-text-center" >
    <h1>{{ parsedCurrentNumber }}</h1>
  </ion-label>
</ion-content>

Answer 1

Look at the following stackblitz.

https://stackblitz.com/edit/ionic-79e1rn

You basically need to loop through your array with a timeout.

ionViewDidEnter(){
    this.runSeries(0);
  }

  runSeries(i){
    if(i < this.nums.length){
      setTimeout(() => {
        this.lastNum = this.nums[i];
        i++;
        this.runSeries(i);
      }, 1000)
    }
  }

and bind lastNum in your template.