[英]Angular2 change detection not working after callback
I am quite new to angular2 and I have a problem with the change detection. 我对angular2很新,我对变化检测有问题。 At the loading of my page, I need to call some API in order to get the information to construct my web page. 在加载我的页面时,我需要调用一些API来获取构建我的网页的信息。 What I do is that when I receive this information (which is contained in an array) I want to iterate through it using *ngFor. 我所做的是当我收到这些信息(包含在数组中)时,我想使用* 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. 所以首先,我想知道angular2是否正常检测到这个this.weeks
改变的事实。 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). 然后我不知道我是否应该使用ngAfterViewInit函数来完成我的工作。问题是我开始这样做,因为在我的courseCompDiagram
我需要使用jquery来查找包含id Completion[...]
的div修改它(使用高图表)。 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. 我尝试使用本主题中所述的ngZone和ChangeDetectionStrategy,但我没有设法让它适用于我的案例。
Any help is appreciated, even if it doesn't completely solves the problem. 任何帮助都表示赞赏,即使它没有完全解决问题。
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();
}
}
You should use arrow functions to be able to use lexical this
, as described below: 您应该使用箭头功能,能够使用词汇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);
});
As a matter with raw callbacks, the this
keyword doesn't correspond to your component instance. 对于原始回调, this
关键字与您的组件实例不对应。
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 . 有关箭头函数词汇的更多提示,请参阅此链接: 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. 您应该利用observable进行HTTP调用。 It doesn't seem the case in your code as far as I can see... 就我所见,在您的代码中似乎并非如此......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.