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

时间:2017-08-01 12:43:03

标签: angular typescript ionic2

我有一个数组 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(标题)函数如下:

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>

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

1 个答案:

答案 0 :(得分:0)

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

#sample data
df = pd.DataFrame({'a':['bar','foo', 'baz'], 'b':[7,8,9]})
print (df)
     a  b
0  bar  7
1  foo  8
2  baz  9

#dict and df for mapping
d = {'foo':15, 'bar':20}
df2 = pd.DataFrame({'m':['baz','bar','foo'], 'n':[3,4,5]})
print (df2)
     m  n
0  baz  3
1  bar  4
2  foo  5

#create Series for map
print (df2.set_index('m')['n'])
m
baz    3
bar    4
foo    5
Name: n, dtype: int64

df['c'] = df['a'].map(d)
df['d'] = df['a'].map(df2.set_index('m')['n'])
print (df)
     a  b     c  d
0  bar  7  20.0  4
1  foo  8  15.0  5
2  baz  9   NaN  3

然后在你的HTML

export class MyComponent {

 public selectedItem: any;

 constructor(){}

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


}