Угловой атрибут 2 не определен на ngOnInit

Question

Я новичок в веб-разработке с AngularJs 2 и У меня нет опыта работы с AngularJs 1 тоже. Поэтому, извините, если я прошу что-то глупое. Я застрял в проблеме, и я искал ее, но я не мог найти для этого никаких решений. :/

Проблема заключается в том:

Я пытаюсь использовать в функции, называемой в конце 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)); 
    } 
} 

Я искал другой Lifecycle Крючки для вызова функции 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); 
}