Angular 2, can't get data after subscribe in ngOnInit

Question

I have a problem, maybe I don't understand how to do but when I try to catch data from an HttpRequest during angular ngOnInit, my console.log return me an "undefined" value. The thing is that when I use this value in my template view it works !

Here is my Component

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,
      ])
    });
  }
}

The variable this.referentiel return me an undefined so I can't bind my Form whith existing value because of that...

Any suggestions ?

This id is not null ! The problem is that this.referentiel is null the first time ngOnInit pass inside that function. I don't know why ! — Valentin Ferey, Nov 17 '17 at 11:17
By default variables are undefined and hence referential is undefined. It becomes defined when a value is assigned to it. if the id is present it happens only in the subscribe function. By the time subscribe completes the console.log and formgroup would have already been executed — Krishnanunni Jeevan, Nov 17 '17 at 11:33
@KrishnanunniJeevan Yes I understand ! That is exactly my question :/ How should I do now ? — Valentin Ferey, Nov 17 '17 at 11:38
@ValentinFerey, as I have answered move the logic which uses the referentiel variable to a common function. Call it from the else condition and inside the subscribe function — Krishnanunni Jeevan, Nov 17 '17 at 11:40

Krishnanunni Jeevan · Accepted Answer · 2017-11-17T11:47:54.543

2

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,
                ])
            });
        }

edited Nov 17 '17 at 11:47

answered Nov 17 '17 at 10:51

Krishnanunni Jeevan

1,719
1
15
24

This is not working... I have a new error : ERROR Error: formGroup expects a FormGroup instance. Please pass one in. – Valentin Ferey Nov 17 '17 at 11:31
That is different error . In your HTML template are you setting the form element
– Krishnanunni Jeevan Nov 17 '17 at 11:38
Yes I am, this error didn't exist before I changed the my code with yours :/ – Valentin Ferey Nov 17 '17 at 11:48
Can you wrap the form in a div and put an ngif.
. I have a feeling form is rendered before the subscription completes and throws this error
– Krishnanunni Jeevan Nov 17 '17 at 11:49
Sorry it should be *ngIf="isNew || referentiel". Alternatively you can set a boolean variable to false by default and set it to true inside buildForm function – Krishnanunni Jeevan Nov 17 '17 at 11:56

Chandru · Answer 2 · 2017-11-17T11:11:45.753

1

Try like this :

Type 1 :

ngOnInit() {
    this.router.params.subscribe((params: Params) => {
        this.load(params['id']);
    });
}

load(id) {
    this.id = id;
    console.log('this.id', this.id);
}

Type 2 :

ngOnInit() {
    this.router.params.subscribe((params: Params) => {
        this.id = params['id'];
    }, () => {
        console.log('this.id', this.id);
    });
}

edited Nov 17 '17 at 11:11

answered Nov 17 '17 at 11:00

Chandru

10,864
6
38
53

This id is not null ! The problem is that this.referentiel is null the first time ngOnInit pass inside that function. I don't know why ! – Valentin Ferey Nov 17 '17 at 11:14

score 0 · Answer 3 · answered Nov 17 '17 at 11:00

Try this:

    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 isn't defined yet outside the subscribe.

Angular 2, can't get data after subscribe in ngOnInit

3 Answers3