javascript - 将新对象绑定(bind)到 Angular 表单而不是单个属性

Question

我有一个非常简单的界面:

(models.ts)

export interface User{
Id : number;
FirstName : string;
LastName : string;
Email: string;
PhoneNumber: string;
}

还有一个非常简单的形式:

(app.component.html)

 <fieldset class='form-group' >
  <h2>Create New User</h2>
  <label>First Name: <input type="text" [(ngModel)]='FirstName'></label><br>
  <label>Last Name: <input type="text" [(ngModel)]='LastName'></label><br>
  <label>Phone number: <input type="phone"[(ngModel)]='PhoneNumber'></label><br>
  <label>Email Address: <input type="email" [(ngModel)]='Email'></label><br>
<button (click)="createNewUser()">Create User</button>
</fieldset>

我以两种方式将数据绑定(bind)到简单的字符串上，然后根据这些字符串创建一个对象。这可行，但是感觉有点困惑，我想知道是否可以新建一个空对象，然后将它们直接分配给该对象，如下所示:

(app.component.ts)

 userToCreate: User;

(app.component.html)

    <label>First Name: <input type="text" [(ngModel)]='userToCreate.FirstName'></label><br>

当我尝试这样做时，TypeScript 会抛出一个错误

Cannot read property 'FirstName' of undefined

我做错了什么，或者这是不可能的？

Answer 1

问题是 userToCreate 是 未定义，因此没有您要绑定(bind)的属性。

您要么需要绑定(bind)到组件的各个属性，然后在 createNewUser 函数中组装用户对象；或者您需要至少使用一个空对象来初始化 userToCreate。

userToCreate: User = {} as User;

需要类型断言(也称为强制转换)，因为 {} 实际上并未定义 User 接口(interface)所需的属性(因为它们都不是可选的) .