離子/角2 - （水龍頭）不起作用（內部元素與（點擊）），（點擊）自動觸發

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'後纔可見。 如何獲得div與contractItem可點擊？另外，如果我使用(click)而不是(tap)expandItem工作，然後它立即收到，就好像contractItem被點擊。

Answer 1

而不是離子項目使用按鈕與ion-item屬性。

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