Question

我有一个项目列表，我需要在点击它后获取所选数据这是我的清单：

<ion-content class="outer-content" no-border-top>
    <ion-list lines (click)="openSubCat($event,category)">
      <ion-list-header>
        Shop For
      </ion-list-header>
      <ion-item>
        <ion-icon name="man" item-left></ion-icon>
         Men
        <ion-icon item-right ></ion-icon>
        </ion-item>
       <ion-item menuClose>
       <ion-icon name="woman" item-left></ion-icon>
         Women
        <ion-icon  item-right></ion-icon>
      </ion-item>
      <ion-item>
        <ion-icon name="baby" item-left></ion-icon>
          Kids
        <ion-icon  item-right></ion-icon>
      </ion-item>
     </ion-list>
</ion-content>`

Answer 1

您可以使用hashbang以类似的方式使用${''}在jquery中使用id。

 <ion-item #menItem (click)="itemClicked(menuItem)>
  ....
 </ion-item>

然后在console.log中将为您提供ion-item的属性。这对inputs很有效，但对结构标签没那么好。

itemClicked(item){
   console.log(item);
}

我认为有更好的方法可以解决你想要实现的目标。最好在代码中将列表创建为对象文字，然后传递给视图以在*ngFor中使用。这使您的代码紧凑而复杂，您的视图简洁明了。

所以在你的页面组件中

categoryArray: Array<any> = [];
....
ionViewDidEnter(){
   this.categoryArray = [{
      value:'Men',
      icon: 'man',
      view:'viewToGoTo'
   },{
      value:'Woman',
      icon: 'woman',
      view:'viewToGoTo'
   },{
      value:'Kids',
      icon: 'baby',
      view:'viewToGoTo'
   }];
}

然后在视图中，您可以编写一个整洁的*ngFor

<ion-item *ngFor="let item of categoryArray; let idx=index (click)="openSubCat(item)">
    <ion-icon [name]="item.icon" item-left></ion-icon>
      {{ item.value }}
    <ion-icon item-right ></ion-icon>
</ion-item>

然后您的点击事件将通过

Object {value: "Men", icon: "man", view: "viewToGoTo"}

在click事件中，您可以获得需要传递的属性的整齐包，并且可以轻松更新和编辑。或者您可以使用和idx定位特定值，这使得如果将复杂性添加到项目中，它将更加通用。除了在管道和过滤器*ngFor中添加酷感

 (click)="openSubCat(item.view,idx)"

然后，您还可以将categoryArray转换为可在整个代码库中使用的界面。

从列表离子2中获取我选择的数据

1 个答案: