ngOnInitで角度2の属性が定義されていません

Question

AngularJs 2とでウェブ開発を初めて行ったんですが、AngularJs 1についての経験がありません。だから、もし私が何か愚かなことを求めていたら、すみません。私は問題に固執していて、私はそれをgoogledしましたが、私はそれのための解決策を見つけることができませんでした。 ：/

問題がある：

私はngOnInitにを初期化するオブジェクトの属性ngOnInitの最後に呼び出される関数でを使用しようとしているが、このオブジェクトがまだある未定義ので、私は次の例外を取得します：ここで

Error: Uncaught (in p**strong text**romise): TypeError: Cannot read property 'secretariatId' of undefined 

は私のコンポーネントです：

import {Component, OnInit, AfterViewChecked} from '@angular/core'; 
import { ActivatedRoute, Router, Params } from '@angular/router'; 

import {StudentService} from './services/student.service'; 
import {Student} from './services/student'; 

import {SecretariatService} from './services/secretariat.service'; 

import {DisciplineService} from './services/discipline.service'; 
import {Discipline} from './services/discipline'; 


@Component({ 
    selector: 'fountain-enrollstudent', 
    template: require('./templates/enrollstudent.component.html') 
}) 
export class EnrollStudentComponent implements OnInit, AfterViewChecked { 
    public text: string; 
    selectedDiscipline: Discipline; 
    disciplines: Discipline[]; 
    student: Student; 

    constructor(
    private disciplineService: DisciplineService, 
    private studentService: StudentService, 
    private secretariatService: SecretariatService, 
    private router: Router, 
    private route: ActivatedRoute 
) { 
    this.text = 'My brand new component!'; 
    } 

    ngOnInit(): void { 
    this.route.params.forEach((params: Params) => { 
     console.log(params); 
     let id = +params['id']; 
     this.getStudent(id); 
     console.log(id); 
     console.log(this.student); 
     this.getDisciplines(this.student.secretariatId); 
    }); 

    console.log(this.student); 

    } 

    // Understand the best moment to call it. Ps.: It doesn't work on ngOnInit 
    getDisciplines(secretariatId: number): void { 
    this.disciplineService.getDisciplinesBy(secretariatId) 
     .then(disciplines => this.disciplines = disciplines); 
    } 

    getStudent(id: number): void { 
    this.studentService.getStudent(id) 
     .then(student => this.student = student); 
    } 

    onSelect(discipline: Discipline): void { 
    this.selectedDiscipline = discipline; 
    } 
} 

ここで

は私のテンプレートです：ここでは

<div class="text-center"> 
    <h4>Disciplines:</h4> 
    <ul class="list-unstyled"> 
    <li *ngFor="let discipline of disciplines" (click)="onSelect(discipline)" [class.selected]="discipline === selectedDiscipline"> 
     <h4> 
     <a>{{discipline?.name}}</a> 
     </h4> 
    </li> 
    </ul> 
</div> 

はDisciplineServiceです：

import { Injectable } from '@angular/core'; 

import { Discipline } from './discipline'; 
import { DISCIPLINES } from './mock-disciplines'; 

@Injectable() 
export class DisciplineService { 

    getDisciplines(): Promise<Discipline[]> { 
    return Promise.resolve(DISCIPLINES); 
    } 

    getDisciplinesBy(secretariatId: number): Promise<Discipline[]> { 
    return this.getDisciplines() 
     .then(disciplines => disciplines.filter(discipline => discipline.secretariatId === secretariatId)); 
    } 
} 

私は、関数getDisciplines呼び出すために別のライフサイクルフックを探していました（ID：番号）が、私はそれらすべてを試してみました私は良い結果が得られませんでした。 ：/

ありがとうございます！

Answer 1

あなたは、チェーンの非同期呼び出しする必要があります：あなたはロック、

ngOnInit(): void { 
    this.route.params.forEach((params: Params) => { 
    console.log(params); 
    let id = +params['id']; 

    // vvvvvvvv use `.then(...)` 
    this.getStudent(id).then(student => { 
     console.log(id); 
     console.log(this.student); 
     this.getDisciplines(this.student.secretariatId); 
    }); 
    } 
} 

getStudent(id: number): void { 
    // vvvvvvvv return the promise so callers can chain their code 
    return this.studentService.getStudent(id) 
    .then(student => this.student = student); 
}