Angular 2異步數據綁定不起作用

Question

在我的應用程序中，我有一個組件將用戶對象發送到另一個組件，並且通過成功的console.log（user.vendorname）返回期望的方式證明它可以正確接收它，但是不會顯示在html上。 html文件

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

組件文件

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

您需要將observable傳遞給異步管道。 異步管道的想法是簡短的版本，因此您無需為任何變量分配observable

做類似的事情

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

要么

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

並像這樣使用

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

推薦它是因為它在銷毀時會自動退訂。 有一些例外情況需要您注意：

當您在單個模板中使用異步時，您將收到兩個請求：

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

docs

Answer 2

async管道僅適用於Observable，此處為user對象分配了value 。 為了使其與async管道一起工作，可以將觀察分配給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

嘗試這個：

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