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

【问题标题】：Getting undefined error during two-way form binding when using object that implements an interface使用实现接口的对象时，在双向表单绑定期间出现未定义错误
【发布时间】：2019-05-11 05:10:42
【问题描述】：

我有一个界面用户：

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

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

user:User;

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

这工作正常。

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

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

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

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

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

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

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

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

user: User = {};

【讨论】：

使用类代替接口会有什么不同吗？
我已经回答了类似的问题here
我理解'as'的用法，但我担心如果返回值为null，那么无论接口或类如何，变量都将设置为null。请问如何应对？
返回值是什么？ ngModel？如果 ngModel 的底层元素将您的 user.name 设置为 null，则您无法反驳。或者你的意思是用户变量本身的初始化。您可以在那里使用类而不是接口，但唯一会改变的是用户对象的初始化。 user: User = {} => user = new User()
我的意思是说提供者（服务）返回一个对象。该页面调用此服务并为提供者返回的对象分配一个变量。假设变量是类或接口类型的实例，如果提供者返回一个有效的对象，那么一切都很好。但是，如果提供者返回 null，那么该变量也将设置为 null。如果使用 ngModel 变量绑定到输入文本框（使用 variable.field），这不是问题。但是，如果不是文本框，而是一个复选框，则会抛出空错误。

【解决方案2】：

使用安全操作员?（这回答了你的问题Or is it good to implement nullable fields?）：

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

【讨论】：

还是使用类而不是iterface更好？
@variable 如果你没有方法（意味着只是属性），你不必这样做，留一个接口更好。