我如何在一個陣列中存儲多個輸入與ionic2/angular2

Question

我有一個動態的用戶輸入列表。用戶可以通過點擊生成輸入字段的「添加目的地」來添加目的地。一旦生成該字段，用戶輸入目的地並單擊應存儲陣列中所有目的地的按鈕。用戶應該能夠添加多個目的地。

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <form> 
    <ion-list> 
    <ion-item> 
    <ion-label fixed>Starting</ion-label> 
    <ion-input type="text" ></ion-input> 
    </ion-item> 

    <ion-item *ngFor="let destination of destinations" > 
    <ion-label fixed>Destination</ion-label> 
    <ion-input type="text" ></ion-input> 
    </ion-item> 
    </ion-list> 


    <button ion-button color="light" icon-right (click)="addDestination()" > 
     Add Destination 
     <ion-icon name="add" ></ion-icon> 
    </button> 
    <div style="padding-bottom: 10px; position: absolute; bottom: 0px; width: 92%"> 
    <button ion-button block (click)="store()">Find Path</button> 
    </div> 
    </form> 
</ion-content> 

打字稿：

import { Component } from '@angular/core'; 

import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    public destinations = []; 

    constructor(public navCtrl: NavController) { 

    } 





    addDestination(){ 
    this.destinations.push(1); 
    console.log(this.destinations); 
    console.log('hello'); 
    } 

    store(){ 
    console.log('hello'); 
    console.log(this.destinations); 
    } 

} 

Answer 1

我在評論意味着什麼：

<div *ngFor="let destination of destinations; let i = index"> 
    <input type="text" [(ngModel)]="destinations[i]"/> 
</div> 

https://plnkr.co/edit/mZi1UYI9drNFRwVQsJs5?p=preview