Угловое обнаружение изменения не работает после обратного вызова

Question

Я совершенно новый для углового2, и у меня есть проблема с обнаружением изменений. При загрузке моей страницы мне нужно вызвать некоторый API, чтобы получить информацию для создания моей веб-страницы. Что я делаю, так это то, что, когда я получаю эту информацию (которая содержится в массиве), я хочу перебирать ее с помощью * ngFor. Это мой код для компонента курса.

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(); 
    } 


} 

Итак, прежде всего, я хотел бы знать, если это нормально, что angular2 оленьей кожи обнаружить тот факт, что this.weeks изменилось. Тогда я не знаю, нужна ли мне функция ngAfterViewInit для моей работы. Проблема в том, что я начал это делать, потому что в моем courseCompDiagram мне нужно использовать jquery, чтобы найти div, содержащий id Completion[...], и изменить его (используя highcharts на нем). Но, может быть, я должен сделать все это в какой-то другой момент загрузки страницы? Я пробовал использовать ngZone и ChangeDetectionStrategy, как указано в разделе this, но мне не удалось заставить его работать над моим делом.

Любая помощь приветствуется, даже если она не полностью решает проблему.

Answer 1

Вы должны использовать функции со стрелками, чтобы иметь возможность использовать лексическую this, как описано ниже:

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); 
}); 

В самом сырьевыми обратные вызовы, то this ключевого слова не соответствует экземпляру компоненты.

Нажмите здесь, чтобы узнать больше о лексике этого со стрелками. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

В противном случае у меня есть образец комментария относительно вашего кода. Вы должны использовать наблюдаемые для ваших HTTP-вызовов. Как мне кажется, в вашем коде не похоже ...

Answer 2

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(); 
    } 


}