Question

我有一个动态的用户输入列表。用户可以通过单击＆＃34;添加目的地＆＃34;来添加目的地。它生成一个输入字段。生成字段后，用户进入目标并单击应存储阵列中所有目标的按钮。用户应该能够添加多个目的地。

<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

如何使用ionic2 / angular2在阵列中存储多个输入

1 个答案: