私が項目のリストを持っているリストイオン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' 
    }]; 
} 

に続いビューで、あなたのクリックイベントが、その後に

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

をそのように合格する

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

*ngForきちんとを書くことができますあなたが渡す必要があるプロパティのきちんとしたパッケージを取得し、b簡単に更新および編集できます。または、idxを使用して特定の値をターゲットにすることができます。これにより、複雑さがプロジェクトに追加された場合に、より汎用性が高まります。だけでなく、パイプとフィルター

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

よう*ngForで涼しさを加えるこれで、また、あなたのコードベース全体で使用できるインターフェイスにcategoryArrayを作ることができます。