带有 Promise 的 ngIf 不起作用答案

【问题标题】：ngIf with Promise doesn't work带有 Promise 的 ngIf 不起作用
【发布时间】：2016-09-01 02:17:03
【问题描述】：

我已经对此进行了相当多的测试，但不明白为什么下面不起作用。问题是在@Input 变量到达并从服务中检索到用户对象后，模板中的 ngIf 仅输出：“一些随机文本”并且没有任何用户对象值。如果我用<div *ngIf="userList">{{userList.firstName}} {{userList.lastName}} 切换ngIf 行，它工作正常（userList 数组也有firstName 和lastName 元素）。出于某种原因，它似乎不能用 promise 函数 getUser 来做到这一点。我已经用 console.log 测试了承诺响应，它肯定是从服务中检索数据对象。我知道本教程使用路由来做这种事情，但我很好奇我在这里做错了什么，所以我可以理解发生了什么。

import { Component, Input } from '@angular/core';
import { User } from './ViewModels/UserVM';
import { UserList } from './userList';
import { UserService } from './user.service';

@Component({
    moduleId: module.id,
    selector: 'user-form',
    template: `
    <div *ngIf="user">{{user.firstName}} {{user.lastName}} some random text</div>
  `
})

export class UserFormComponent {
    errorMessage: string;
    user: User;
    _selectedUser: UserList;
    @Input()
    set selectedUser(selectedUser: UserList) {
        if (selectedUser) {
            this._selectedUser = selectedUser;
            this.getUser(selectedUser.id);
        }
    }
    get selectedUser() { return this._selectedUser; }


    constructor(private userService: UserService) { }

    getUser(id: number) {
        this.userService.getUser(id).toPromise()
            .then(user => this.user = user)
            .catch(err => this.errorMessage = err);
    }

}

-----更新-----

原来我忘记了 User 对象不是完全平坦的，名字和姓氏实际上在 user.Person.firstName 等中。

【问题讨论】：

你应该实现 OnInit 并在 ngOnInit() 方法中获取用户。
我实际上尝试了 ngOnInit，但它的变量尚未设置。这就是我尝试 setter/getter 的原因
在使用 *ngIf 之前，您必须确保用户存在。所以你可以为此检查 Promise。
您面临的具体问题是什么？
“对于结果，我只得到了 div 的“一些随机文本”部分。“它也应该有来自用户对象的值。

标签： angular

【解决方案1】：

当您使用 promise/callback 时，您不确定数据何时到达，

所以可能你应该使用?. 运算符而不是ngIf。

<div>{{user?.firstName}} {{user?.lastName}} some random text</div>

【讨论】：

【解决方案2】：

这对我来说是一个愚蠢的错误。 User 对象不是平面的。是User.Person.firstName等等。

【讨论】：

你应该在这个问题上更明确地表明这只是一个愚蠢的错误。现在的标题非常具有误导性。

【解决方案3】：

我发现初始化声明变量的数据将解决问题。如果您需要更多地控制可观察更改的时间，您可能需要查看 ChangeDetectorRef 并在您的承诺返回后使用它来强制更改

import (ChangeDetectorRef)

constructor(private ref: ChangeDetectorRef

this.ref.detectChanges();

这将检测整个组件的更改，尽管 Angular 2 的更改检测成本非常低

【讨论】：