3

私は angular2 を初めて使用し、変更の検出に問題があります。ページの読み込み時に、Web ページを構築するための情報を取得するために 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 関数を使用する必要があるかどうかわかりません。問題は、courseCompDiagramjquery を使用して ID を含む div を見つけてCompletion[...]変更する必要があるため、それを開始したことです (ハイチャートを使用して) ）。しかし、ページのロードの別の時点でこれらすべてを行う必要がありますか? このトピックに記載されているように ngZone と ChangeDetectionStrategy を使用してみましたが、私のケースではうまくいきませんでした。

問題が完全に解決しない場合でも、どんな助けも歓迎します。

4

2 に答える 2

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


}
于 2016-02-10T14:08:28.113 に答える
3

this以下で説明するように、 lexical を使用できるようにするには、アロー関数を使用する必要があります。

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キーワードはコンポーネント インスタンスに対応しません。

アロー関数の字句 this に関するヒントについては、 https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions のリンクを参照してください。

それ以外の場合は、コードに関するサンプル コメントがあります。HTTP 呼び出しにはオブザーバブルを活用する必要があります。私が見る限り、あなたのコードではそうではないようです...

于 2016-02-10T14:08:02.567 に答える