Angular 4 not displaying data

Question

I'm trying to display some data from my component to the html. What confuses me is the fact that in older component files this worked. Now, in a few new ones I've created, it only starts working after logging in and refreshing the page.

My component.ts file:

import {Component} from '@angular/core';
import {DataService} from '../../services/data.service';
import {ActivatedRoute, Router} from '@angular/router';
import * as $ from 'jquery/dist/jquery.min.js';
import 'jquery-ui/jquery-ui.min.js';

declare let jQuery: any;

@Component({
  templateUrl: '../../templates/plan/general-info.html',
})
export class GeneralInfoComponent {

  data;
  selectedCompany = null;
  selectedPlace = null;

  constructor(private dataService: DataService,
              private router: Router,
              private route: ActivatedRoute) {
    this.data = this.route.parent.snapshot.data;
    this.selectedCompany = this.data.companies[0];
    this.selectedPlace = this.dataService.selectedPlace.getValue();
  }
}

The troubling part of my template file:

<div class="general-data">
  <h3>{{selectedCompany.name}}</h3>
  <h3>Reg nr {{selectedCompany.regCode}}</h3>
  <h3>{{selectedCompany.address}}</h3>
  <h3>{{selectedCompany.phone}}</h3>
  <h3>{{selectedCompany.email}}</h3>
  <h3>{{selectedCompany.contactPerson}}</h3>
  <h3>{{selectedCompany.personCode}}</h3>
</div>
<div class="general-data">
  <h3>{{selectedPlace.name}}</h3>
  <h3>{{selectedPlace.address}}</h3>
  <h3>{{selectedPlace.contactPerson}}</h3>
  <h3>{{selectedPlace.phone}}</h3>
  <h3>{{selectedPlace.email}}</h3>
  <h3>{{selectedPlace.personCode}}</h3>
</div>

I don't want to write another hack to display the data with jQuery. The weird part is that the data is nicely displayed after refreshing as if it didn't get the data the first time I load the page. Is something like that even possible?

NOTE: When logging the data right after giving values to this.selectedCompany and this.selectedPlace, it displays correct info in console.

My question: how to get it working straight away without having to refresh the page?

I've been messing with this the whole day and would love a solution.

Thanks in advance.

what are the things are not working? did you put a break point and checked? — rijin
– rijin, Commented Mar 20, 2018 at 18:46
you should post your Resolve service, which resolves the companies. And please don't use jQuery. You will get lost too quickly if you use jQuery and angular together :) — Poul Kruijt
– Poul Kruijt, Commented Mar 20, 2018 at 18:50
No error in the console when you load the page the first time? — Martin Parenteau
– Martin Parenteau, Commented Mar 20, 2018 at 18:56
I 100% get the data, so it seems to me that the problem lies in displaying it. Even if I get the data 0.01s later, it shouldn't affect the displaying since I'm sort of binding the innerHTML's of the h3 tags to the objects from component.ts file. Or should it? @ConnorsFan - no error. — Kert
– Kert, Commented Mar 20, 2018 at 18:56
where is the data member of the route parent set? what is your router configuration? Debug an check if this.route.parent.data is defined. — Jota.Toledo
– Jota.Toledo, Commented Mar 20, 2018 at 19:08

Basavaraj Bhusani · Accepted Answer · 2018-03-20 19:02:13Z

0

Use "?." (The safe navigation operator) after the object in all expressions. Like below.

{{selectedCompany?.name}}

Link - https://angular.io/guide/template-syntax#expression-operators

edited Mar 20, 2018 at 19:02

answered Mar 20, 2018 at 18:52

Basavaraj Bhusani

5,7132 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Basavaraj Bhusani Over a year ago

@Kert, remove the initialization to "null" and check please. And try to initialize data on "ngOnInit" life cycle hook.

Basavaraj Bhusani Over a year ago

@Kert, hope this link also helps https://stackoverflow.com/a/39915434/7458082

Kert Over a year ago

When removing the "null" initialization, it worked for a few times but now it's not working again (how???). "ngOnInit" produces this: "TSLint: Implement lifecycle hook interface OnInit for method ngOnInit in class GeneralInfoComponent"

Basavaraj Bhusani Over a year ago

You should use somethings like this. export class GeneralInfoComponent implements OnInit link - https://angular.io/api/core/OnInit

Kert Over a year ago

Sadly this also doesn't help.

Collectives™ on Stack Overflow

Angular 4 not displaying data

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related