ionic/angular2 - （タップ）付きの要素内で、（タップ）が機能しない、（クリック）自動的に発生する

Question

私はこのようなHTMLをいくつか持っています。私は、イオンを使用しています：ここで

<ion-item class="changepadding" *ngFor="let j of items ; let i = index" (tap)='expandItem(i)' id='{{i}}' #feedstyle text-wrap> 
     <div class="flex" #flex> 
     <div class="nonzoomimage"> 
      <img class="imagepost" src="{{j.url}}"> 
     </div> 
     <div class="descholder"> 
      <div class='description'>{{j.title}}</div> 
      <div class='link'>{{j.date}}</div> 
     </div> 
     </div> 
     <div class="feedtoptextcontainer" #feedtop (tap)='contractItem(i)'> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{j.profilepic}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{j.username}}</h4><br> 
      <h4 class="poststudio">Ed's Studio</h4> 
     </div> 
     <div class="postprofilelink"> 
      <div class="book">{{j.title}}</div> 
     </div> 
     </div> 
     <img class="imageposttwo" #imagepost src="{{j.url}}"> 
     <div class='caption' #caption> 
     {{j.caption}} 
     <br> 
     </div> 
    </ion-item> 

はcontractItem機能です - これは応答しません(tap)次のとおりです。

contractItem(item) { 
    console.log("in contract item 8*****"); 
    let flexArray = this.flexComponents.toArray(); 
    let feedArray = this.feedComponents.toArray(); 
    let itemArray = this.components.toArray(); 
    let imageComps = this.imageComponents.toArray(); 
    let captionComps = this.captionComponents.toArray(); 


    this.myrenderer.setElementStyle(flexArray[item].nativeElement, 'display', 'flex'); 
    this.myrenderer.setElementStyle(flexArray[item].nativeElement, 'padding', '4px 4px 0px 4px'); 
    this.myrenderer.setElementStyle(feedArray[item].nativeElement, 'display', 'none'); 
    //flexArray[item].nativeElement.style = 'display: none'; 
    //feedArray[item].nativeElement.style = 'display: flex'; 
    this.myrenderer.setElementStyle(imageComps[item].nativeElement, 'display', 'none'); 
    this.myrenderer.setElementStyle(captionComps[item].nativeElement, 'display', 'none'); 
    //imageComps[item].nativeElement.style = 'display: block'; 
    this.myrenderer.setElementStyle(itemArray[item]._elementRef.nativeElement, 'padding', '0'); 
    //itemArray[item]._elementRef.nativeElement.style = "padding: 0"; 
    //this.myrenderer.setElementAttribute(itemArray[item]._elementRef.nativeElement, 'no-padding', ''); 
    //this.myrenderer.setElementAttribute(itemArray[item]._elementRef.nativeElement, 'no-lines', ''); 
    //var selectedRow = document.getElementById('item'); 
    //console.log(selectedRow); 
    } 

を私はタップすると上部にconsole.logメッセージが出力を得ることはありません。面積は(tap)='contractItem(i)'です。最初は.feedtoptextcontainerは表示されません... (tap)='expandItem'をタップすると表示されます。 contractItemのdivをタップ可能にするにはどうすればよいですか？また、(tap)expandItemの代わりに(click)を使用した場合、それはただちにcontractItemがタップされたかのように収縮します。

Answer 1

イオンアイテムの代わりにイオンアイテム属性のボタンを使用します。

<button ion-item (click)="buttonClick()"> 
    Button Item 
</button>