Ionic2 - 从离子列表中获取点击的项目并绑定到输入字段

Question

我有一个数组 public items = ['item1', 'item2', 'item3']; 我在视图中将其用作：

<ion-slide> <ion-list inset>
    <ion-item *ngFor="let item of items" (click)="getItem(title)">
      {{ title }}
    </ion-item>
</ion-list> </ion-slide>

我的 getItem(title) 函数如下：

getItem(item) {
console.log(item);
this.slider.slideNext();
}

所以基本上我正在滑动到下一个幻灯片项目，并将该项目作为参数传递。 在我的第二张幻灯片上，我使用：

<ion-slide> <ion-item>
          <ion-label stacked>Label</ion-label>
          <ion-input type="text">{{ item }}</ion-input>
</ion-item> </ion-slide>

我想将第一张幻灯片中点击的项目显示为第二张幻灯片中输入字段的值。

Answer 1

在您的组件中，只需声明一个变量来存储所选项目，并在幻灯片中显示该变量

export class MyComponent {

 public selectedItem: any;

 constructor(){}

 getItem(item) {
  // store item in variable
  this.selectedItem = item;
  console.log(item);
  this.slider.slideNext();
 }


}

然后在你的 HTML 中

<ion-slide> 
  <ion-item>
   <ion-label stacked>Label</ion-label>
   <ion-input type="text" [(ngModel)]="selectedItem"></ion-input>
  </ion-item> 
</ion-slide>