Question

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

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);
    }

}

- - - - - - - - UPDATE

原来我忘记了User对象不是完全平坦的，firstname和lastname实际上是user.Person.firstName等。

Answer 1

当您正在玩 承诺/回调 时，您不确定数据何时到达，

所以你应该使用?.运算符，不要使用 ngIf 。

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

Answer 2

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

Answer 3

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

import (ChangeDetectorRef)

constructor(private ref: ChangeDetectorRef

this.ref.detectChanges();

然而，这将检测整个组件的变化，尽管Angular 2的变化检测成本非常微小

与Promise合作并不起作用

3 个答案: