在angular2模板中渲染异步对象

Question

I have a template:

<div class="container">
<div class="jumbotron text-center">
    <h1>{{user && user.displayName}}</h1>
    <p>How is your day, today??</p>
    <mood-meter [current]="user && user.currentMood"
                (onChange)="moodChanged(value)"></mood-meter>
</div>

How can I rid off all those && operators? User is set when observable is resolved.

Async pipe doesn't work well with objects. How do you handle it?

Answer 1

if you are using observable to be resolved just replace the below lines

<h1>{{user && user.displayName}}</h1>

<mood-meter [current]="user && user.currentMood"(onChange)="moodChanged(value)"></mood-meter>

Replace with

 <h1>{{user && user?.displayName}}</h1>

<mood-meter [current]="user && user?.currentMood"(onChange)="moodChanged(value)"></mood-meter>

I just put '?' after user object, it will keep updating for object change data asynchronously.