將對象綁定到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>