Angular 2异步数据绑定不起作用

Question

In my application I have one component sending a user object to another component and it receives it correctly as proven by successful console.log(user.vendorname) returning as expected but it won't show up on the html. The html file

<div class="col-centered">
<h1 *ngIf="user | async">Welcome {{user.vendorname}}</h1>
</div>

The component file

import { User } from '../User';
import { AccountInfo } from './../AccountInfo';
import { LoginService } from './../login.service';
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/map';






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

user: User;
subscription: Subscription;



  constructor(route: ActivatedRoute, private loginService: LoginService) {



   }

  ngOnInit() {
    this.subscription = this.loginService.getMessage().subscribe(data => {

       this.user = data;
       console.log(this.user.vendorname);
    });
  }



  AfterViewInit(){

  }
ngOnDestroy() {
        // unsubscribe to ensure no memory leaks


    }

}

Answer 1

You need to pass observable to async pipe. async pipe idea is for short version so you dont neet to assign observable to any variable

Do something like

public get user() Observable<User> {
  return this.loginService.getMessage();
}

or

public getUser() Observable<User> {
  return this.loginService.getMessage();
}

And use it like

<your-component [yourInput]="user | async"></your-component>
or
<your-component [yourInput]="getUser | async"></your-component>

It is recomended because it automatically unsubscribes on destroy. There are exceptions where you need to watch out for:

When you use async in single template like you would get two requests:

(user | async).id
(user | async).name

docs

Answer 2

async pipe works only on Observable, here user object has value assigned to. To make it works with async pipe assign observable to user

import { Observable } from 'rxjs/Observable';//don't miss this import.

user: Observable<User>; //add declaration for user

ngOnInit() {
  this.user = this.loginService.getMessage()
}

Answer 3

Try this:

public get user() Observable<User> {
  return this.loginService.getMessage();
}