时间戳

首页 > 解决方案 > 使用实现接口的对象时，在双向表单绑定期间出现未定义错误

angular - 使用实现接口的对象时，在双向表单绑定期间出现未定义错误

问题描述

我有一个界面用户：

export interface User{
name:string;
email:string:
address:string;
}

我在我的离子页面和类中导入了这个，在构造函数代码之前我有代码：

user:User;

然后，在 ngOnInit 方法中，我有设置此用户变量值的代码。

这工作正常。

现在我正在尝试实现用户对象和表单输入字段的双向绑定。在表单输入字段中，我使用这样的模型：[(ngModel)]="user.name"

现在我收到一个错误，即 user.name 字段未定义。所以我去我的页面代码并尝试设置 user:User={};

这会产生错误，因为接口需要名称、电子邮件和地址 - 所以不能声明为空。如果我删除接口并将代码声明为：user:any={}那么它可以正常工作。

我认为未定义的错误是因为加载 UI 时用户对象没有值（在 ngOnInit 方法中设置）？我该如何处理这种我想实现接口概念的情况？或者实现可为空的字段是否很好？还是使用课程的最佳实践？请我对此有所澄清。

标签： angularionic-framework

解决方案

您可以通过?在名称后使用 使接口中的属性成为可选的。

export interface User {
    name?: string;
    email?: string;
    address?: string;
}

使用此代码，您不必在创建用户对象时显式定义所有属性：

user: User = {};

推荐阅读