将对象绑定到Ionic 2中的输入字段

Question

我陷入一个相当基本的问题，但不知道如何使用谷歌搜索。

在我的Ionic 2应用程序中，我有一个AddPassengerPage，其中包含用于姓名，电子邮件和电话的inout字段。 在我的模块中，我声明了这些变量：

name: string;
phone: string;
email: string;

所以在我看来，我可以将输入字段绑定到它：

<ion-input type="text" [(ngModel)]="email"></ion-input>

稍后，我想将乘客传递给提供者，该提供者将其发送到我的API。 我想做的只是没有三个变量，而是在乘客对象上，因此我的代码如下所示：

passenger: object;

在我看来：

<ion-input type="text" [(ngModel)]="passenger.email"></ion-input>

这是我希望的幻影代码。 这在真实代码中看起来如何？

Answer 1

我建议使用这样的界面

// This can be placed before 'export class AddPassengerPage' 
// and after your import statements
interface Passenger {
  name: string;
  phone: string;
  email: string;
}

// passenger can then be type checked against the defined interface of Passenger
passenger: Passenger;

这将允许您使用点符号访问对象的属性。

<ion-input type="text" [(ngModel)]="passenger.email"></ion-input>

另一种选择是使用方括号运算符访问通用对象的属性。

<ion-input type="text" [(ngModel)]="passenger['email']"></ion-input>