如何禁用跨度標簽上的點擊事件 - Angular 6

Question

我想根據條件禁用帶有“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>

Answer 1

試試這個：（我也在你的 html 中更改了一些代碼）

 function DeleteHour(e){ e.parentNode.style.display = "none"; e.parentNode.previousElementSibling.style.display="none"; }

 <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>" onclick="DeleteHour(this)">X</span> <td style="width: 95%">{{item}}</td> <td style="width: 5%"> <span class="<some_class>" onclick="DeleteHour(this)">X</span> <td style="width: 95%">{{item}}</td> <td style="width: 5%"> <span class="<some_class>" onclick="DeleteHour(this)">X</span> </td> </tr> </tbody> </table>

Answer 2

我認為您可以在 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>