异步管道不会将对象数据填充到模板中

Question

任何人都可以帮我看看我的模板中是否存在语法错误？它不会给出错误,但不会将数据填入模板:

<div *ngIf="(hero | async)">
  <h2>{{hero}}</h2>
  <h2>{{hero.name}} details!</h2>
  <div>
    <label>_id: </label>{{hero._id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name" />
  </div>
  <button (click)="goBack()">Back</button>
</div>

组件代码

export class HeroDetailComponent implements OnInit {
    errorMessage: string;

    //@Input() 
    hero: Observable<Hero>;

    constructor(
        private _heroService: HeroService,
        private _routeParams: RouteParams) {
    }

    ngOnInit() {
        let _id = +this._routeParams.get('_id');
        this._heroService.loadHero(_id);
        this.hero = this._heroService.hero$;
        this.hero.subscribe(data => 
           console.log(data)
        )
    }

在console.log(data)打印:

对象{_id:11,名称:"尼斯先生"}

这意味着正确检索数据.

该<div>块也显示出来,这意味着*ngIf该对象看起来是非空的.

<h2>{{hero}}</h2>节目[object Object].

但为什么{{hero.name}}不显示？

Answer 1

使用异步管道对象有点棘手.使用包含数组的Observable,我们可以使用NgFor并创建一个本地模板变量(hero下面),在异步管道从Observable中提取数组后,该变量将被赋予数组的每个项目.然后我们可以在模板的其他地方使用该变量:

<div *ngFor="let hero of heroes | async">
  {{hero.name}}
</div>
<!-- we can't use hero here, outside the NgFor div -->

但是对于包含单个对象的Observable,我不知道有任何方法可以创建引用该对象的本地模板变量.相反,我们需要做一些更复杂的事情:

<div>{{(hero | async)?.name}}</div>

我们需要为我们想要显示的对象的每个属性重复这一点.(上面的行假定组件属性hero是Observable.)

hero$使用组件逻辑将对象(在下面的Observable 中)分配给组件的属性可能更容易:

this._heroService.hero$.subscribe(data => this.hero = data.json());

然后使用NgIf或Elvis/safe导航操作符在视图中显示数据:

<div *ngIf="hero">{{hero.name}}</div>
<!-- or -->
<div>{{hero?.name}}</div>

Answer 2

另一个选择是使用@Input并利用智能/哑元组件方法.在智能组件中,您可以将异步对象传递给哑组件,然后在哑组件中将其用作普通对象.

我们的想法是,您的智能组件处理逻辑和数据,而哑组件处理表示.

智能组件:

<dumb-component [myHero]="hero$ | async"></dumb-component>

哑组件类:

@Input() myHero: Hero;

哑组件模板:

<div>{{ myHero.name }}</div>

Answer 3

现在可以使用v4.0.0中提供的'as'语法:

<span *ngIf="user$ | async as user; else loadingUserInfo">
 {{user.firstName}} {{user.lastName}}
</span>
<ng-template #loadingUserInfo>
  Loading user information...
</ng-template>

github上的RFC线程中提供了更多详细信息.