ionic / angular2 -（点击）不起作用（带有（点击）的元素内部），（点击）自动触发答案

【问题标题】：ionic / angular2 - (tap) does not work (inside element with (tap)), (click) fires automaticallyionic / angular2 -（点击）不起作用（带有（点击）的元素内部），（点击）自动触发
【发布时间】：2017-08-29 22:08:04
【问题描述】：

我有一些看起来像这样的 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);
  }

当我点击带有(tap)='contractItem(i)' 的区域时，顶部的console.log 消息不会得到输出。最初，.feedtoptextcontainer 是不可见的……它仅在点击 (tap)='expandItem' 后可见。如何让div 和contractItem 可以点击？另外，如果我使用(click) 而不是(tap) expandItem 可以工作，然后它会立即收缩，就像contractItem 被点击一样。

【问题讨论】：

标签： html angular typescript ionic-framework styles

【解决方案1】：

使用具有 ion-item 属性的按钮代替 ion-item。

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

【讨论】：