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

时间:2018-05-09 21:48:51

标签: angular ionic-framework ionic2 ionic3

我遇到了一个相当基本的问题,但不知道如何谷歌。

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

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>

这是我想要的幻象代码。这看起来如何实际代码?

1 个答案:

答案 0 :(得分:0)

我建议使用像这样的界面

web

这将允许您使用点表示法访问对象的属性。

// 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>