Angular 2、ngOnInit订阅后获取不到数据
Angular 2, can't get data after subscribe in ngOnInit
我有一个问题,也许我不明白该怎么做,但是当我在 angular ngOnInit 期间尝试从 HttpRequest 捕获数据时,我的 console.log return 我"undefined" 值。
问题是当我在我的模板视图中使用这个值时它起作用了!
这是我的组件
export class ReferentielFormComponent implements OnInit {
id: number;
currentUser;
referentiel;
progressValue: number;
formGroup: FormGroup;
isNew: boolean;
constructor(private service: AppService,
private referentiels: ReferentielService,
private router: ActivatedRoute,
private config: NgbTabsetConfig) {
}
ngOnInit() {
this.router.params.subscribe((params: Params) => this.id = params['id']);
if (this.id) {
this.referentiels.getReferentiel(this.id).subscribe(data => this.referentiel = data);
} else {
this.referentiel = {};
}
this.isNew = !this.referentiel;
console.log(this.referentiel);
console.log(this.isNew);
this.progressValue = 20;
this.formGroup = new FormGroup({
titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
Validators.required,
]),
description: new FormControl(!this.isNew ? this.referentiel.description : '', [
Validators.required,
])
});
}
}
变量 this.referentiel return 我是未定义的,因此我无法将我的表单与现有值绑定...
有什么建议吗?
this.referentiel is undefined till the subscribe completes. I think you have to move the formbuilder code to subscribe.
ngOnInit() {
this.router.params.subscribe((params: Params) => this.id = params['id']);
if (this.id) {
this.referentiels.getReferentiel(this.id).subscribe(data => {
this.referentiel = data;
this.buildForm(););
}
else {
this.buildForm();
this.referentiel = {};
}
}
//Build form function
buildForm() {
this.isNew = !this.referentiel;
this.formGroup = new FormGroup({
titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
Validators.required,
]),
description: new FormControl(!this.isNew ? this.referentiel.description : '', [
Validators.required,
])
});
}
试试这个:
ngOnInit() {
this.router.params.subscribe((params: Params) => this.id = params['id']
if (this.id) {
this.referentiels.getReferentiel(this.id).subscribe(data => this.referentiel = data);
} else {
this.referentiel = {};
}
this.isNew = !this.referentiel;
console.log(this.referentiel);
console.log(this.isNew);
this.progressValue = 20;
this.formGroup = new FormGroup({
titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
Validators.required,
]),
description: new FormControl(!this.isNew ? this.referentiel.description : '', [
Validators.required,
])
});
);
}
this.is 尚未在订阅外定义。
这样试试:
类型 1 :
ngOnInit() {
this.router.params.subscribe((params: Params) => {
this.load(params['id']);
});
}
load(id) {
this.id = id;
console.log('this.id', this.id);
}
类型 2:
ngOnInit() {
this.router.params.subscribe((params: Params) => {
this.id = params['id'];
}, () => {
console.log('this.id', this.id);
});
}
我有一个问题,也许我不明白该怎么做,但是当我在 angular ngOnInit 期间尝试从 HttpRequest 捕获数据时,我的 console.log return 我"undefined" 值。 问题是当我在我的模板视图中使用这个值时它起作用了!
这是我的组件
export class ReferentielFormComponent implements OnInit {
id: number;
currentUser;
referentiel;
progressValue: number;
formGroup: FormGroup;
isNew: boolean;
constructor(private service: AppService,
private referentiels: ReferentielService,
private router: ActivatedRoute,
private config: NgbTabsetConfig) {
}
ngOnInit() {
this.router.params.subscribe((params: Params) => this.id = params['id']);
if (this.id) {
this.referentiels.getReferentiel(this.id).subscribe(data => this.referentiel = data);
} else {
this.referentiel = {};
}
this.isNew = !this.referentiel;
console.log(this.referentiel);
console.log(this.isNew);
this.progressValue = 20;
this.formGroup = new FormGroup({
titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
Validators.required,
]),
description: new FormControl(!this.isNew ? this.referentiel.description : '', [
Validators.required,
])
});
}
}
变量 this.referentiel return 我是未定义的,因此我无法将我的表单与现有值绑定...
有什么建议吗?
this.referentiel is undefined till the subscribe completes. I think you have to move the formbuilder code to subscribe.
ngOnInit() {
this.router.params.subscribe((params: Params) => this.id = params['id']);
if (this.id) {
this.referentiels.getReferentiel(this.id).subscribe(data => {
this.referentiel = data;
this.buildForm(););
}
else {
this.buildForm();
this.referentiel = {};
}
}
//Build form function
buildForm() {
this.isNew = !this.referentiel;
this.formGroup = new FormGroup({
titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
Validators.required,
]),
description: new FormControl(!this.isNew ? this.referentiel.description : '', [
Validators.required,
])
});
}
试试这个:
ngOnInit() {
this.router.params.subscribe((params: Params) => this.id = params['id']
if (this.id) {
this.referentiels.getReferentiel(this.id).subscribe(data => this.referentiel = data);
} else {
this.referentiel = {};
}
this.isNew = !this.referentiel;
console.log(this.referentiel);
console.log(this.isNew);
this.progressValue = 20;
this.formGroup = new FormGroup({
titre: new FormControl(!this.isNew ? this.referentiel.titre : '', [
Validators.required,
]),
description: new FormControl(!this.isNew ? this.referentiel.description : '', [
Validators.required,
])
});
);
}
this.is 尚未在订阅外定义。
这样试试:
类型 1 :
ngOnInit() {
this.router.params.subscribe((params: Params) => {
this.load(params['id']);
});
}
load(id) {
this.id = id;
console.log('this.id', this.id);
}
类型 2:
ngOnInit() {
this.router.params.subscribe((params: Params) => {
this.id = params['id'];
}, () => {
console.log('this.id', this.id);
});
}