Question

我有一些看起来像这样的HTML。我正在使用Ionic：

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

ionic / angular2 - （tap）不起作用（带（tap）内部元素），（click）自动触发

1 个答案: