angular 4 not able to push on an array of undefined

Question

I am trying to push on an array for every interval but for some reason I get an error either it is ERROR TypeError: Cannot set property 'NaN' of undefined if I use this.numbers[this.value] = this.value; or it is core.es5.js:1020 ERROR TypeError: Cannot read property 'push' of undefined if I use this.numbers.push(this.value);

here is my code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  timer = null;
  value: number;
  interval: number;
  numbers = [];


  constructor() { }


  ngOnInit() {
      console.log(this.numbers);
  }

  onClickStart() {
    console.log('timer called');
    if (this.timer !== null) {
      return;
    }
    this.timer = setInterval(function() {
      this.value += 1;
      // console.log(this.numbers[this.value - 1 ]);
      // this.numbers[this.value] = this.value;
      this.numbers.push(this.value);
      console.log(this.numbers);
    }, this.interval );
  }

  onClickStop() {
    clearInterval(this.timer);
    this.timer = null;
  }

}

My html is

<div class="row">
          <div class="col-xs-12 "> 
            <button type="submit" class="btn btn-success" (click)="onClickStart()">Start</button>
            <button type="button" class="btn btn-danger" (click)="onClickStop()">Stop</button>
            <button type="button" class="btn btn-primary" >Clear</button>
          </div>
</div>
<div class="row">
  <div class="col-xs-10">

  <hr>
  <ul class="list-group">
    <a 
      class="list-group-item" 
      style="cursor: pointer"
      *ngFor="let number of numbers"
      >
      <app-even [num]="number" ></app-even>
      <app-odd [num]="number" ></app-odd> 
    </a>
  </ul>
  </div>
</div>

but I don't think it matters yet

Günter Zöchbauer · Accepted Answer · 2017-08-03 15:19:56Z

4

function () {} causes this not to point to the current class instance anymore, as most coming from other languages would expect, use arrow functions instead to get the desired behavior:

this.timer = setInterval(() => {

edited Aug 3, 2017 at 15:19

answered Aug 3, 2017 at 15:03

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kaddath Over a year ago

i may be wrong, but if answer is correct, the explanation is semantically wrong. Actually setInterval always run its argument from global scope, it is him who breaks this with function(). This will work with arrow function because it has no proper this, always retreiving it from context

Florian Genser Over a year ago

some further reading can be found there: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Günter Zöchbauer Over a year ago

@Kaddath no idea why you think it is semantically wrong. It's the same as function() { ... }.bind(this). It just ensures, that this inside the function points to the class instance where the method is defined.

Kaddath Over a year ago

@GünterZöchbauer from this point of view yes, but your sentence can be understood in other ways, just wanted to be clear (semantically unclear would have been better)

Günter Zöchbauer Over a year ago

@Kaddath I guess I see now what you mean. I updated my answer.

|

Collectives™ on Stack Overflow

angular 4 not able to push on an array of undefined

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related