CODEWITHSUNDEEP
angularhttptypescriptsubscribengoninit
Valentin Ferey
Valentin Ferey

Reputation: 43

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

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 ?

Upvotes: 0

Views: 2734

Answers (3)

Krishnanunni Jeevan
Krishnanunni Jeevan

Reputation: 1759

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

Upvotes: 2

Chandru
Chandru

Reputation: 11184

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

Upvotes: 1

Melchia
Melchia

Reputation: 24234

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.

Upvotes: 0

Related Questions