离子/角2 - （水龙头）不起作用（内部元素与（点击）），（点击）自动触发

问题描述：

我有一些看起来像这样的HTML。我使用的离子型：离子/角2 - （水龙头）不起作用（内部元素与（点击）），（点击）自动触发

<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被点击。

答

而不是离子项目使用按钮与ion-item属性。

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

离子/角2 - （水龙头）不起作用（内部元素与（点击）），（点击）自动触发

相关推荐