Когда я нажимаю на метод ion-icon в ion-card, также срабатывает

У меня есть ion-card, при нажатии на которую открывается карточка на другой странице, и у меня есть одна функция на ion-icon, которая размещена над ion-card, и при нажатии открывается страница профиля.

Проблема в том, что когда я нажимаю ion-icon, он запускает метод viewProfile(), а также вызывает метод openPage() в ion-card.

<ion-card class = "cards" text-left (click) = "openPage(item)"
      *ngIf = "uid != item.uid && !item.hasOwnProperty('opponentUid')">
  <!--Card-image-->
  <div card-image>
      <img [src] = "item.imageUrl" />
      <span edit text-uppercase>
         <ion-icon name = "contact" (click) = "viewProfile(item.uid)"></ion-icon>
      </span>
   </div>
</ion-card>

Любое предложение, как решить эту проблему. Спасибо

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
121
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку ион-значок содержится в ион-карта, я бы предложил переместить действие щелчка ion-card в div с изображением карты.

<ion-card class = "cards" text-left 
      *ngIf = "uid != item.uid && !item.hasOwnProperty('opponentUid')">
  <!--Card-image-->
  <div card-image (click) = "openPage(item)">
      <img [src] = "item.imageUrl" />
      <span edit text-uppercase>
         <ion-icon name = "contact" (click) = "viewProfile(item.uid)"></ion-icon>
      </span>
   </div>
</ion-card>

Я переместил метод ion-card в img, и это сработало. Спасибо

Balaj Khan 19.02.2019 07:03

Здорово! Пожалуйста, не забудьте принять мой ответ, если он вам помог.

Lucien Dubois 19.02.2019 07:04

Другие вопросы по теме