Angular2 - Error when I try to render a value on page

Question

I have this simple code in my component.html page that doesn't work:

html component code

<p class="form-control-static"><b>{{_idOffert}} - {{offert.idOffert}}</b></p>

component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Offert } from "../model/offert";
import { Router,  ActivatedRoute } from "@angular/router";
import { OffertService } from "../services/offert.service";
import { AuthService } from "../services/auth.service";

@Component({
  selector: 'app-offert-detail',
  templateUrl: './offert-detail.component.html',
  styleUrls: ['./offert-detail.component.css']
})
export class OffertDetailComponent implements OnInit {

  @Input() _idOffert: number;

  offert:Offert;
  test:string;
  errorMessage: string;

  constructor(
    private offertService: OffertService,
    private router: Router,
    private route: ActivatedRoute,
    private authService: AuthService) { 

      if (!this.authService.isLoggedIn()) {
        this.router.navigate([""]);
      }

    }
    
  ngOnInit() {
        
    this.route.params.subscribe(params =>{
      this._idOffert = params['idOffert'];
    });
    
    var s = null;
    
    s = this.offertService.GetOffertDetail(0, this._idOffert);    
    
    s.subscribe(
      res => {
        this.test = res.header['title'];
        this.offert = res.header;                        
      },
      error => this.errorMessage = <any>error
    );
        
  }

}

The _idOffert variable is showed properly but offert.idOffert no.

If I check on the console log, I find this:

ERROR

19:47:36.003 ERROR Error: Uncaught (in promise): TypeError: co.offert is undefined
View_OffertDetailComponent_0/<@ng:///AppModule/OffertDetailComponent.ngfactory.js:1707:9
debugUpdateRenderer@http://localhost:4200/vendor.bundle.js:13428:12
checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12807:5
callViewAction@http://localhost:4200/vendor.bundle.js:13117:17
execComponentViewsAction@http://localhost:4200/vendor.bundle.js:13063:13
checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12808:5
callWithDebugContext@http://localhost:4200/vendor.bundle.js:13790:39
debugCheckAndUpdateView@http://localhost:4200/vendor.bundle.js:13330:12
ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.bundle.js:10899:54
RouterOutlet.prototype.activateWith@http://localhost:4200/vendor.bundle.js:21311:9
ActivateRoutes.prototype.placeComponentIntoOutlet@http://localhost:4200/vendor.bundle.js:20491:9
ActivateRoutes.prototype.activateRoutes@http://localhost:4200/vendor.bundle.js:20472:21
ActivateRoutes.prototype.act…
Analisi dello stack:
resolvePromise@http://localhost:4200/polyfills.bundle.js:6638:31 [angular]
resolvePromise@http://localhost:4200/polyfills.bundle.js:6609:17 [angular]
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:6686:17 [angular]
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4200/vendor.bundle.js:4893:28 [angular]
ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6323:17 [angular]
Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6091:28 [<root> => angular]
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6519:25 [<root>]
ZoneTask/this.invoke@http://localhost:4200/polyfills.bundle.js:6390:25 [<root>]
 1 vendor.bundle.js:1861:5
    defaultErrorLogger http://localhost:4200/vendor.bundle.js:1861:5
    ErrorHandler.prototype.handleError http://localhost:4200/vendor.bundle.js:1921:9
    PlatformRef_.prototype._bootstrapModuleFactoryWithZone/</<.next http://localhost:4200/vendor.bundle.js:5531:69
    EventEmitter.prototype.subscribe/schedulerFn< http://localhost:4200/vendor.bundle.js:4605:36
    SafeSubscriber.prototype.__tryOrUnsub http://localhost:4200/vendor.bundle.js:390:13
    SafeSubscriber.prototype.next http://localhost:4200/vendor.bundle.js:339:17
    Subscriber.prototype._next http://localhost:4200/vendor.bundle.js:279:9
    Subscriber.prototype.next http://localhost:4200/vendor.bundle.js:243:13
    Subject.prototype.next http://localhost:4200/vendor.bundle.js:15226:17
    EventEmitter.prototype.emit http://localhost:4200/vendor.bundle.js:4591:54
    NgZone.prototype.triggerError http://localhost:4200/vendor.bundle.js:4962:56
    NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onHandleError http://localhost:4200/vendor.bundle.js:4923:17
    ZoneDelegate.prototype.handleError http://localhost:4200/polyfills.bundle.js:6295:17
    Zone.prototype.runGuarded http://localhost:4200/polyfills.bundle.js:6067:25
    drainMicroTaskQueue/_loop_1 http://localhost:4200/polyfills.bundle.js:6530:25
    drainMicroTaskQueue http://localhost:4200/polyfills.bundle.js:6539:21
    ZoneTask/this.invoke http://localhost:4200/polyfills.bundle.js:6390:25

I don't know why it is not working...

If I try instead to render just {{offert}} it shows "[object Object]"...

Thanks to support

score 1 · Accepted Answer · answered Apr 12 '17 at 18:02

The page renders before ngOnInit is called.

Therefore it tries to get offert.idOffert which throws the error.

You can solve this in a a few ways but I would suggest just change your html to:

<div *ngIf="offert">
  <p class="form-control-static"><b>{{_idOffert}} - {{offert.idOffert}}</b></p>
</div>

Angular2 - Error when I try to render a value on page

html component code

component.ts

ERROR

1 Answers1