Ionic 2 повторяющихся элемента в массиве

Question

Я пытаюсь выполнить итерацию каждого элемента массива через определенный интервал времени, например, 2 секунды, и отобразить его.Когда я пытаюсь это сделать, консоль успешно регистрируется, но когда я пытаюсь вставить его в msg, чтобы достичь своей цели, я получаю ERROR TypeError: Cannot set property 'msg' of undefined at timer Что-то не хватает или лучшее решение?

export class AuthPage {

    public verifyPhone : string;
    public collection = 'clients';
    public data;
    public user;
    public response;
    count : number;
    msg : any[];

    constructor(public navCtrl : NavController, public navParams : NavParams, public afs : AngularFirestore, public appService : AppServiceProvider, private alertCtrl : AlertController,) {


        let messages=[
            'Welcome to Fight Rabbit',
            'We are going to ask you a few questions to help setup your account',
            'What\'s your Phone Number?'
        ]
        var interval = setInterval(function () {
            timer()

        }, 2000)

        var count = 0;
        function timer() {
            this.msg=[];
            if (count < messages.length) {
                this.msg.push(messages[count])
                console.log(messages[count],count)
                count += 1
            } else {
                clearInterval(interval)
            }

        }
    }
}

Answer 1

Вы получаете сообщение об ошибке: невозможно установить свойство msg из undefined, это означает, что ключевое слово this в вашем функциональном блоке не определено.ключевое слово this не связывается внутри вашего функционального блока

попробуйте сначала console.log внутри вашей функции и проверьте, не является ли оно неопределенным, а затем, если это так, попробуйте использовать синтаксис функции стрелки es6 или простой хак:

timer() {
  this.msg = [];
  console.log(this) // if you get empty msg array then bind your this else bind it before the timer function starts(just above the timer())

  let $this = this // use $this every where inside this block and it wont give you undefined error

  if (count < messages.length) {
      $this.msg.push(messages[count])
      console.log(messages[count],count)
      count += 1
  } else {
      clearInterval(interval)
  }

}

Answer 2

Быстрое исправление будет:

export class AuthPage {

    public verifyPhone : string;
    public collection = 'clients';
    public data;
    public user;
    public response;
    count : number;
    msg : any[];

    constructor(public navCtrl : NavController, public navParams : NavParams, public afs : AngularFirestore, public appService : AppServiceProvider, private alertCtrl : AlertController,) {


        let messages=[
            'Welcome to Fight Rabbit',
            'We are going to ask you a few questions to help setup your account',
            'What\'s your Phone Number?'
        ]

        var count = 0;
        var interval = setInterval(() => {
            this.msg=[];
            if (count < messages.length) {
                this.msg.push(messages[count])
                console.log(messages[count],count)
                count += 1
            } else {
                clearInterval(interval)
            }    
        }, 2000)
    }
}

Answer 3

Скорее всего, проблема с областью действия.

Попробуйте заменить ваш код следующим:

    export class AuthPage {
    msg : any[];
    count = 0;
    .......

    constructor(public navCtrl : NavController, public navParams : NavParams, public afs : AngularFirestore, public appService : AppServiceProvider, private alertCtrl : AlertController,) {
        const messages = [
            'Welcome to Fight Rabbit',
            'We are going to ask you a few questions to help setup your account',
            'What\'s your Phone Number?'
        ]
        const interval = setInterval(() => {
            this.timer()
        }, 2000)

        this.count = 0;
    }

    timer() {
      this.msg = [];
      if (count < messages.length) {
          this.msg.push(messages[count])
          console.log(messages[count],count)
          count += 1
      } else {
          clearInterval(interval)
      }

    }
}