Javascript 回调后Angular2更改检测不工作

我对angular2很陌生，我对变化检测有问题。 在加载我的页面时，我需要调用一些API来获取构建我的web页面的信息。我要做的是，当我收到这个信息（包含在一个数组中）时，我想使用*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/core'导入{组件，输入}；
从“./js/coursesTreatment.js”导入{courseCompDiagram，sepExInWeeks}；
从“./js/courseMng.js”导入{getSampleWeeks}；
@组成部分({
选择器：“课程”，
指令：[练习]，
模板：`
{{aCourse.name}
{{week.weekNb}}
`
})
出口班课程{
//这是从父组件输入的
@输入（）过程；
本周=[]；
ngAfterViewInit（）{
//我调用这个方法，当回调完成时，
//它执行以下行
courseCompDiagram（this.a课程，函数（相关课程）{
//当我的API调用完成后，我处理课程，并将结果存储在几周内
this.weeks=sepExInWeeks（相关课程、课程、练习）；
});
//这不应该留在我的代码里，
//但这是为了证明如果我把它叫做这里，
//这几周将发生切实的变化
this.weeks=getSampleWeeks（）；
}
}

因此，首先，我想知道angular2没有检测到这一事实是否正常，即本周发生了变化。 然后我不知道是否应该使用ngAfterViewInit函数来完成我的工作。问题是，我开始这么做是因为在我的

课程计算图中，我需要使用jquery找到包含id
Completion[…]
的div，并对其进行修改（使用highcharts）。但也许我应该在加载页面的其他地方做这些？
我尝试使用ngZone和ChangeDetectionStrategy，如主题中所述，但在我的案例中并没有成功

非常感谢您的帮助，即使它不能完全解决问题。
您应该使用箭头函数，以便能够使用词法
此
，如下所述：

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

关键字与组件实例不对应

有关此箭头函数词法的更多提示，请参阅此链接：

---

否则，我有一个关于您的代码的示例注释。您应该为HTTP调用利用可观察性。就我所知，在您的代码中似乎不是这样的…

Zone应该可以工作。请核对我的答案。谢谢，这是我的答案。我知道这类问题，但仍然没有发现错误。我也确实没有使用可观测数据，因为我觉得这是不必要的。这仅仅是一种最佳实践，还是应该如何实现代码才能正常工作？

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


}