Angular 如何禁用离子3的离子卡？

我想使用官方文档中列出的disabled属性禁用离子卡。我试着使用它，但什么都没有发生，我仍然可以与卡互动

我也试过使用[disabled]但它仍然不能禁用卡

实现这一目标的正确方法是什么

代码：

执行
仪表板

page.html

正文

//无残疾

//有残疾

查看带有/不带禁用属性的代码

page.html

正文

//无残疾

//有残疾

查看带有/不带禁用属性的代码

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

执行
仪表板

试试这个

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

执行
仪表板

根据您的标签，您使用的是爱奥尼亚3，然后您也看到了错误的文档。你应该看看地图

ionic 3上的卡禁用功能不存在，但在ionic 4中引入。所以您需要以某种方式解决这个问题，这可以通过编程实现，就像在answer中一样。演示：

也就是说，如果您希望有条件地禁用卡，可以使用布尔标志：

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

否则，如果应始终禁用单击事件，则只需将其从卡中完全移除即可

---

。。。但无论您选择什么路径，那么您可能还需要在禁用时设置卡的样式，以便用户可以看到卡实际上已禁用。

根据您的标签，您使用的是ionic 3，那么您也查看了错误的文档。你应该看看地图

ionic 3上的卡禁用功能不存在，但在ionic 4中引入。所以您需要以某种方式解决这个问题，这可以通过编程实现，就像在answer中一样。演示：

也就是说，如果您希望有条件地禁用卡，可以使用布尔标志：

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

否则，如果应始终禁用单击事件，则只需将其从卡中完全移除即可

---

。。。但无论您选择什么路径，那么您可能还需要在禁用时设置卡的样式，以便用户可以看到卡实际上已禁用。

根据文档，

disabled=“true”

应该可以实现这一点，但作为一种解决方法，您可以使用

用户选择：无

.html

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

根据文档，
disabled=“true”
应该可以解决这个问题，但是作为一种解决方法，您可以使用
用户选择：无

.html

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

很奇怪，为什么我没有得到同样的结果？很好，我这边，还有你的代码工作。很奇怪，为什么我没有得到同样的结果？谢谢你指出这一点。我无法打开您提供的链接Well进行了更新以回答问题，不知道您是否有条件地要禁用该卡，或者是否始终禁用该卡。但我想不管你们怎么选择，若你们在同一页上有其他的卡片被启用，你们需要对卡片做一些样式设置来表明它被禁用了。这很有效！我没有得到css部分。我该如何更改css？[class.isDisabled]=“isDisabled”是什么意思？它根据条件
isDisabled
向html元素添加一个
disabled
类。命名是一样的。然后，如果您希望以某种方式设置卡的样式，以便用户可以清楚地看到该卡已被禁用，那么您可以使用css/scss/sass文件中的
disabled
类。我在css文件中添加了.isDisabled{pointer events:none；opacity:0.5；}，但它不会有条件地应用该类，无论天气是真是假，它都适用于此。谢谢你指出这一点。我无法打开您提供的链接Well进行了更新以回答问题，不知道您是否有条件地要禁用该卡，或者是否始终禁用该卡。但我想不管你们怎么选择，若你们在同一页上有其他的卡片被启用，你们需要对卡片做一些样式设置来表明它被禁用了。这很有效！我没有得到css部分。我该如何更改css？[class.isDisabled]=“isDisabled”是什么意思？它根据条件
isDisabled
向html元素添加一个
disabled
类。命名是一样的。然后，如果您希望以某种方式设置卡的样式，以便用户可以清楚地看到该卡已被禁用，那么您可以使用css/scss/sass文件中的
disabled
类。我在css文件中添加了.isDisabled{pointer events:none；opacity:0.5；}，但它不会有条件地应用该类，无论天气是真是假，它都适用于此