Angular2 - show data before load from http [duplicate]

Question

i have a problem with asynchronous loading data from server. In view are no any data because rendering is before load. Here is my code: app.component.ts:

    user: User = new User()
    ngOnInit() {
    this.userService.getUser(1).then(usr => {
      this.user = usr;
    }).catch((error: any) => {

    });
  }

app.component.html:

<p>{{user.name}}</p>

I thought that the data would change dynamically. Where is problem? Thanks

Try to log the this.user after assignment in async call and show us the content — Gangadhar Jannu
– Gangadhar Jannu, Commented May 29, 2017 at 12:06
Did you change the DetectionStrategy in this\parent component? — Yonatan
– Yonatan, Commented May 29, 2017 at 12:07
@jonrsharpe, just wanted to point that was not exactly the issue here as in dupe suggestion. If you check the comment in below answer by OP. Data structure was changed, so apparently user no longer had property name ;) — AVJT82
– AVJT82, Commented May 29, 2017 at 12:18

Rahul Singh · Accepted Answer · 2017-05-29 12:01:05Z

1

Try and use the elvis operator this might help

<p>{{user?.name}}</p>

Or may even try to make use of ngIf

<div *ngIf = "user">
    user.name
</div>

answered May 29, 2017 at 12:01

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

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

4 Comments

bluray Over a year ago

This is not good solution. I dont see user name. I created service for store user and getter and setter method a i put breakpoint to get set, first call get method and than set method

Rahul Singh Over a year ago

is the user getting logged in the component check that ?

bluray Over a year ago

I am sorry, problem is in data which i get from server. Data structure has been changed and i dont know. It works now

jonrsharpe Over a year ago

@bluray then why have you accepted this answer? It doesn't solve the problem.

Yoav Schniederman · Accepted Answer · 2017-05-29 13:10:21Z

0

<p>{{user.name}}</p>

OR

<div *ngIf="user">
    {{user.name}}
</div>

answered May 29, 2017 at 13:10

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular2 - show data before load from http [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related