这与Angular 2

Question

我已经制作了一个带有simle服务的组件。 我想实现以下行为 - 当我的服务的http.get请求完成时 - 将接收的参数用于另一个获取请求。

但是，Groupservice请求的this.sections[0].Id参数未定义，并且当前没有section参数。虽然从data.json收到的数据是正确的。

代码是（附加导入）

@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');
    }
}

我无法弄清楚这个问题的原因。 请指教。

Answer 1

在let _self = this;

中使用ngOnInit

，例如

@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');
    }
}

在module.ts中添加providers: [SectionService, GroupService]，这将避免生成服务实例

Answer 2

这是我遇到过的最奇怪的事情。 但是将Id部分属性更改为小写有助于...

我对此修复没有解释。