首页 文章

ngIf with Promise不起作用

提问于
浏览 次
1

我_________理解为什么下面不起作用 . 问题是在@Input变量到达并且从服务检索用户对象之后，模板中的ngIf仅输出："some random text"并且没有用户对象值 . 如果我用 <div *ngIf="userList">{{userList.firstName}} {{userList.lastName}} 切换ngIf行，它工作正常（userList数组也有firstName和lastName元素） . 出于某种原因，似乎可以好奇我发生了什么 .

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对象不是完全平坦的，firstname和lastname实际上是user.Person.firstName等 .

angular

3 回答

  • 1

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

    import (ChangeDetectorRef)

constructor(private ref: ChangeDetectorRef

this.ref.detectChanges();

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

    回复于
  • 0

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

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

    <div>{{user?.firstName}} {{user?.lastName}} some random text</div>
    回复于
  • 1

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

    回复于

相关问题