Могу ли я вставить кнопку внутри элемента кнопки и сделать щелчки для различных реакций?

Question

Для моего проекта Ionic я хочу добавить кнопку «удалить» внутри элемента кнопки.

Есть две функции, я ожидаю, что openItem () запускается при нажатии кнопки img элемента, а другая функция delete () запускается при нажатии кнопки «удалить». Тем не менее, кнопка «обнаружение» не работает для этой цели, когда я нажимаю на нее.

      <button ion-item>
        <ion-avatar item-start (click)="openItem(item)">
          <img [src]="item.profilepic" />
        </ion-avatar>
        <h2>{{item.befollowed_name}}</h2>
        <p>{{item.befollowed_email}}</p>
        <p>{{item.status}}</p>
        <button ion-button color="danger"(click)="delete(item)">delete</button>
        <ion-note item-end *ngIf="item.note">{{item.note}}</ion-note>
      </button>

Можете ли вы помочь, как заставить кнопку "удалить" работать, как я ожидал?

Answer 1

Добавьте атрибут item-content к вашей кнопке удаления.
<button ion-button item-content color="danger"(click)="delete(item)">delete</button>

На заметку о том, что вместо решения, описанного выше, вы можете просто использовать ion-item на самом верхнем контейнере?

Затем вы можете просто добавить стиль cursor: pointer в ion-avatar, чтобы курсор изменялся при наведении на изображение.

, например

<ion-item>
    <ion-avatar item-start (click)="openItem(item)">
       <img [src]="item.profilepic" style="cursor: pointer;" />
    </ion-avatar>
    <h2>{{item.befollowed_name}}</h2>
    <p>{{item.befollowed_email}}</p>
    <p>{{item.status}}</p>
    <button ion-button color="danger"(click)="delete(item)">delete</button>
    <ion-note item-end *ngIf="item.note">{{item.note}}</ion-note>
</ion-item>