ngModel中的异步数据

Question

我的表单包含从服务器绑定的异步数据：

<form>
 <input [(ngModel)]="currentService.user.username">
 <input [(ngModel)]="currentService.user.email">
</form>

只有当我将*ngIf="currentService.user"添加到表单时才能正常工作，但在从服务器获取数据之前，我希望渲染输入没有值。但我得到错误：

  

'无法读取未定义'

的属性'用户名'

我该如何解决这个问题？可能，我需要类似async管道到ngModel的东西，但这显然不起作用。

Answer 1

你可以尝试一下

 <input [(ngModel)]="currentService.user && currentService.user.username">
 <input [(ngModel)]="currentService.user && currentService.user.email">

Working Example

Answer 2

您需要在服务中初始化用户。我认为您的代码如下所示：

private user: User;

然后你进行HTTP调用或类似的事情来设置用户。 但是在检索用户时，用户是未定义的，直到异步调用结束。

因此，如果您改变这样的行，它应该有效：

private user: User = new User;

Answer 3

您必须将currentService定义为下面的对象，然后才能从服务器获取数据之前使用它。

currentService = {
    user : {
        username: '',
        email: ''
    }
}

然后

<form>
 <input [(ngModel)]="currentService.user.username">
 <input [(ngModel)]="currentService.user.email">
</form>