从列表离子2

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"} 

在这样点击事件你得到一个你需要通过的属性的整洁包，并且可以b易于更新和编辑。或者，您可以使用idx和idx来定位特定值，如果将复杂性添加到项目中，这会使其更具多功能性。以及增加凉意在*ngFor像管道和过滤器

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

然后，您可以也使categoryArray成随后可以在整个代码库中使用的接口。