Как отключить ионную карту?

Question

Я хочу отключить ионную карту, используя атрибут disabled , который указан в официальной документации.Я пытался использовать его, но ничего не происходит, и я все еще могу взаимодействовать с картой.

Я также пытался использовать [отключено] , но при этом карта не отключается.

Как правильно это сделать?

код:

<ion-card (click)="openControllerPage('ERD')" disabled='true'>
          <ion-card-content>
            <div style="text-align: center;">
              <img src="assets/imgs/executive_dashboard.png" style="height: 30px;width: 30px">
              <h2 style="color: #8d8d8d"><b>Executive<br> Dashboard</b></h2>
            </div>
          </ion-card-content>
 </ion-card>

Answer 1

Попробуйте,

<ion-card (click)="openControllerPage('ERD')" [disabled]="true">
          <ion-card-content>
            <div style="text-align: center;">
              <img src="assets/imgs/executive_dashboard.png" style="height: 30px;width: 30px">
              <h2 style="color: #8d8d8d"><b>Executive<br> Dashboard</b></h2>
            </div>
          </ion-card-content>
 </ion-card>

Answer 2

Согласно документу, disabled="true" должен сделать трюк, но в качестве обходного пути вы можете использовать user-select: none;

.html

<ion-card disabled="true">
  ...
</ion-card>

.sccs

ion-card[disabled="true"] {
  user-select: none;
}

Answer 3

Согласно вашему тегу вы используете ionic 3, тогда вы также просматриваете неправильную документацию.Вы должны взглянуть на документацию версии 3

Функция отключения для карты на ionic 3 не существовала, но была введена в ionic 4. Так что вам нужно как-то обойти это, чтопрограммно можно сделать как в ответе здесь .Демонстрация для этого: STACKBLITZ

То есть, если вы хотите условно отключить карту, вы можете использовать для этого логический флаг:

(click)="isDisabled ? $event.stopPropagation() : openControllerPage('ERD'); isDisabled ? false : null"
[class.isDisabled]="isDisabled"

в противном случае просто полностью удалите событие щелчка с карты, если оно всегда должно быть отключено.

... но какой бы путь вы ни выбрали, вам также, возможно, потребуется стилизовать карту, когда она отключена, поэтомуэтот пользователь может видеть, что карта фактически отключена.

Answer 4

page.html

    <ion-card disabled="true">
    <p>Text</p>
    </ion-card>

// без отключения

https://prnt.sc/p9olvz

// с отключением

https://prnt.sc/p9om69

посмотреть ваш код с / без отключить свойства