我正在尝试创建一个记忆游戏，其中以 ionic 和 angular 显示扩展的数字列表，用户必须输入答案

Question

我这样做的方式是让每个数字出现然后消失。我尝试了很多选项，但只有最后一个数字在数组中有两个或更多数字时才会显示。我怀疑它与 for 循环有关，但似乎没有办法解决它。这是我生成数字函数的打字稿代码：

  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
  }

这是我的变量声明和注入：

  @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 ) { }

下面是我调用生成函数的方式：

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

这是我的 HTML 应该显示数字的部分的代码，但是当我的数组中有两个或更多数字时只显示一个数字：

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

Answer 1

看看下面的 stackblitz。

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

您基本上需要在超时的情况下循环遍历您的数组。

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

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

并在您的模板中绑定 lastNum。

我正在尝试创建一个记忆游戏，其中以 ionic 和 angular 显示扩展的数字列表，用户必须输入答案

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

html

for-loop

ionic-framework

angular

ionic5