Angular2 change detection not working after callback

Question

I am quite new to angular2 and I have a problem with the change detection. At the loading of my page, I need to call some API in order to get the information to construct my web page. What I do is that when I receive this information (which is contained in an array) I want to iterate through it using *ngFor. This is my code for a course component.

import {Component,Input} from 'angular2/core';
import {courseCompDiagram, sepExInWeeks} from "../js/coursesTreatment.js";
import {getSampleWeeks} from "../js/courseMng.js";

@Component({
    selector: 'course',
    directives:[Exercises],
    template: `
    <div class="course">
        <h2>{{aCourse.name}}</h2>
        <div class='diag-container row'> 
            <div id="Completion{{aCourse.name}}"></div>

            <div *ngFor="#week of weeks"> {{week.weekNb}} </div>
        </div>
    </div>`
})

export class Course{
    //This is inputed from a parent component
    @Input() aCourse;
    this.weeks = [];

    ngAfterViewInit(){
        //I call this method and when the callbacks are finished,
        //It does the following lines
        courseCompDiagram(this.aCourse, function(concernedCourse){
            //When my API call is finished, I treat the course, and store the results in weeks
            this.weeks = sepExInWeeks(concernedCourse.course.exercises);
        });
        //This is not supposed to stay in my code,
        //but is here to show that if I call it here,
        //the weeks will effectively change
        this.weeks = getSampleWeeks();
    }


}

So first of all, I would like to know if it's normal that angular2 doesnt detect the fact that this.weeks changed. Then I don't know if I should us the ngAfterViewInit function to do my work in. The problem is that I began doing that because in my courseCompDiagram I need to use jquery to find the div containing the id Completion[...] and modify it (using highcharts on it). But maybe I should do all this at some other point of the loading of the page ? I tried using ngZone and ChangeDetectionStrategy as stated in this topic but I didn't manage to make it work on my case.

Any help is appreciated, even if it doesn't completely solves the problem.

Zone should work. Check with my answer. – Günter Zöchbauer Feb 10 '16 at 14:09 — Günter Zöchbauer, Feb 10 '16 at 14:09

Günter Zöchbauer · Answer 1 · 2016-06-17T18:21:52.893

export class Course{
    //This is inputed from a parent component
    @Input() aCourse;
    this.weeks = [];

    constructor(private _zone:NgZone) {}

    ngAfterViewInit(){
        //I call this method and when the callbacks are finished,
        //It does the following lines
        courseCompDiagram(this.aCourse, (concernedCourse) => {
            //When my API call is finished, I treat the course, and store the results in weeks
            this._zone.run(() => {
              this.weeks = sepExInWeeks(concernedCourse.course.exercises);
            });
        });
        //This is not supposed to stay in my code,
        //but is here to show that if I call it here,
        //the weeks will effectively change
        this.weeks = getSampleWeeks();
    }


}

score 3 · Accepted Answer · answered Feb 10 '16 at 14:08

You should use arrow functions to be able to use lexical this, as described below:

courseCompDiagram(this.aCourse, (concernedCourse) => {
  // When my API call is finished, I treat the course,
  // and store the results in weeks
  this.weeks = sepExInWeeks(concernedCourse.course.exercises);
});

As a matter with raw callbacks, the this keyword doesn't correspond to your component instance.

See this link for more hints about the lexical this of arrow functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

Otherwise I have a sample comment regarding your code. You should leverage observables for your HTTP calls. It doesn't seem the case in your code as far as I can see...

Thanks, this was the answer for me. I knew of this kind of problem but still didn't see the mistake. It is also true that I have not been using observables because I felt it was not necessary. Is it just a best practice or is it how the code should be implemented in order to properly work? — Licia, Feb 10 '16 at 15:02

Angular2 change detection not working after callback

2 Answers2