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

【问题标题】：Angular 2 async data binding not workingAngular 2异步数据绑定不起作用
【发布时间】：2018-01-11 14:43:44
【问题描述】：

在我的应用程序中，我有一个组件将用户对象发送到另一个组件，并且它正确地接收到它，正如成功的 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


    }

}

【问题讨论】：

标签： angular angular2-template angular2-services angular2-directives

【解决方案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

【讨论】：

我应该然后放入模板 {{getuser()}} 吗？
不，你在模板中以用户身份使用它，所以它看起来像
Welcome {{user?.vendorname}}
带有“？”标记

【解决方案2】：

async 管道仅适用于 Observable，此处 user 对象已分配给 value。为了使其与 async 管道一起工作，将 observable 分配给 user

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

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

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

【讨论】：

我按照你的建议做了，现在它说“类型'Observable'不可分配给类型'User'。类型'Observable'中缺少属性'valid'”
user: Observable<User>; 然后ngOnInit() { this.user = this.loginService.getMessage(); }
@AlexanderStaroselsky 感谢队友的提醒，我更新了答案:)
试过了。由于类型不同，该元素没有出现在屏幕上，并且控制台日志不起作用。
@majestyc54 那你为什么需要控制台日志呢？如果你想使用来自user 的一些值，那么你必须再次订阅this.user observable

【解决方案3】：

试试这个：

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

【讨论】：

Welcome {{user?.vendorname}}