This with Angular 2

Question

I've made a component with a simle service. I want to achieve the following behavior - When my service's http.get request is completed - use the received parameters for another get request.

However, the this.sections[0].Id parameter of the Groupservice request is undefined, and the current this does not have a section parameter. though the data received from data.json is correct.

The code is (imports appended)

@Component({
    template: require('./content.component.html'),
    styles: [require('./content.component.css')],
    providers: [SectionService, GroupService]
})
export class ContentComponent {
    id: string;
    sections: Array<Section>;
    groups: Array<Group>
    selectedSectionTitle: "";
    constructor(private router: Router, private activateRoute: ActivatedRoute, private sectionService: SectionService, private groupService: GroupService) {
        this.router.events.subscribe(path => {
            this.id = activateRoute.snapshot.params['id'];
        });
        this.id = activateRoute.snapshot.params['id'];

    }


    ngOnInit() {
        this.sectionService.getSections()
            .subscribe((data: Response) => {
                 this.sections = data.json();        
            }, err => {
                console.error("Error occurred while saving setting", err);
            }, () => {
                this.groupService.getGroups(this.sections[0].Id).subscribe((data: Response) => {
                    this.groups = data.json();
                })
            });

    }

}

export class Group {
    isSelectionComponentOpened: boolean;
    isItemEditComponentOpened: boolean;
    Id: string;
    Title: string;
    SectionId: string;
    Items: Array<string>
}

export class Section {
    Id: string;
    Title: string;

}




@Injectable()
export class SectionService {


    constructor(private http: Http) { }
    // Переделать на Observable
    getSections() {
        return this.http.get('Section/Get');
    }
}

I can't figure out the cause of this problem. Please advise.

Answer 1

use let _self = this; in ngOnInit

such as

@Component({
    template: require('./content.component.html'),
    styles: [require('./content.component.css')],

})
export class ContentComponent {
    id: string;
    sections: Array<Section>;
    groups: Array<Group>
    selectedSectionTitle: "";
    constructor(private router: Router, private activateRoute: ActivatedRoute, private sectionService: SectionService, private groupService: GroupService) {
        this.router.events.subscribe(path => {
            this.id = activateRoute.snapshot.params['id'];
        });
        this.id = activateRoute.snapshot.params['id'];

    }


    ngOnInit() {
        let _self = this;
        this.sectionService.getSections()
            .subscribe((data: Response) => {
                 _self.sections = data.json();        
            }, err => {
                console.error("Error occurred while saving setting", err);
            }, () => {
                this.groupService.getGroups(_self.sections[0].Id).subscribe((data: Response) => {
                    _self.groups = data.json();
                })
            });

    }

}

export class Group {
    isSelectionComponentOpened: boolean;
    isItemEditComponentOpened: boolean;
    Id: string;
    Title: string;
    SectionId: string;
    Items: Array<string>
}

export class Section {
    Id: string;
    Title: string;

}




@Injectable()
export class SectionService {


    constructor(private http: Http) { }
    // Переделать на Observable
    getSections() {
        return this.http.get('Section/Get');
    }
}

add providers: [SectionService, GroupService] in module.ts which will avoid making instances of service

Answer 2

This was the oddest thing I have encountered. But changing the section Id property to lowercase helped...

I do not have an explanation for this fix.