时间戳

首页 > 解决方案 > 如何禁用跨度标签上的点击事件 - Angular 6

javascript - 如何禁用跨度标签上的点击事件 - Angular 6

问题描述

我想根据条件禁用带有“X”符号的“删除小时”的点击事件。提前致谢。

<table navigatable class="<some_class>">
    <tbody>
        <tr *ngFor="let item of list; let i=index">
            <td style="width: 95%">{{item}}</td>
            <td style="width: 5%">
                <span class="<some_class>" (click)="DeleteHour(i)">X</span>
            </td>
        </tr>
    </tbody>
</table>

在此处输入图像描述

标签： javascriptcssangularhtml-table

解决方案

我认为您可以在 DeleteHour(i) 中使用“提前返回”来禁用该操作。

const DeleteHour = (i) => {
  if (isDisabled(list[i])) return;
  // ...rest of the function
}

对于“视觉上禁用”部分，我想如果它被禁用，它就像改变视觉上的东西。如果是，您可以执行以下操作：

<span class="<some_class>" (click)="DeleteHour(i)">{{ isDisabled(item) ? '' : 'X' }}</span>

您可以（也许应该）也使用按钮并使用 css 伪类delete-hour:disabled { ...styles }：

<button class="delete-hour" (click)="DeleteHour(i)" [disabled]="isDisabled(item)">X</button>

推荐阅读