如何在 Ionic 2 中使卡片中的按钮可点击

Question

我在离子 2 中制作了一张卡片，如下所示。单击卡片时，它会转到另一个页面。

<ion-content padding class="item item-text-wrap">
  <ion-list>
    <ion-item *ngFor='let topic of topicList' text-wrap (click)="redirect(topic)">
        <ion-thumbnail id="storyThumbnail">
          <img src="{{ topic.picDirectory }}">
        </ion-thumbnail>
        <div id="caption">
          <h2><strong>{{ topic.headline }}</strong></h2>
          <p id="artDate">{{ topic.date }}</p>
          <ion-icon name="bookmark" id="icon"></ion-icon>
          <!--<button id="viewButton" ion-button clear item-end  (click)="postItem(topic)">View</button>-->
          <ion-icon name="logo-facebook" id="icon"></ion-icon>
        </div>
    </ion-item>
  </ion-list>
</ion-content>

当我按照指示(注释(添加按钮时，我无法单击该按钮。当我单击按钮时，它的反应就像我单击整个卡片一样，它调用重定向((而不是postItem((。该按钮将使用来自主题的数据，因此我不能将其放在离子项之外，因为它包含 ngFor，但是当我将其放入离子项中时，我无法单击它。

该按钮似乎位于离子项的后面，因此无法通过单击访问。有没有办法让它在项目内时可点击？

Answer 1

您在离子项目级别添加了(单击(="重定向(主题(">，它代表整个卡片，因此当您单击按钮时，它实际上单击了整张卡片。

要解决此问题 - 您需要从 ion-item 中删除(单击(事件调用并取消注释您的按钮代码，它应该可以工作。

让我知道。