如何在angular4中編寫條件css？

我有一個表，其中每行是基於api數據循環。在一列中，我有一個編輯圖標，點擊圖標就會打開一個彈出窗口。我只想一次顯示一次彈出窗口，意思是如果一個彈出窗口打開，用戶將無法點擊剩餘的編輯圖標。我只是試圖使用CSS - 「指針事件：無」來禁用圖標，但如何編寫條件？如何在angular4中編寫條件css？

2017-10-12 knbibin

是你使用模態？你彈出了什麼？ – vertika

不是一個模型，它與一些輸入元素的div。我需要一次顯示一個。 – knbibin

'[style.pointerEvents] =「isOpen？'none'：'auto'」'將其應用於圖標。彈出窗口打開時，將「isOpen」設置爲「true」。關閉時將其設置爲「false」。 – karthikaruna

首先，您將需要訪問彈出式窗口（通用工具），它可以告訴你如果彈出窗口是打開或關閉的，你可以通過一個變量或方法來維護 - 取決於你在應用程序中如何構建/使用彈出窗口功能

如果你正在使用任何Angular特定的內置庫對於彈出窗口，它可能有這個實用程序

一旦你得到了彈出的打開狀態，那麼在Angular模板中有多種方式，你可以使用它來設置指針事件none來禁用圖標：

在你的CSS

還要定義類 -

.pointer-none { pointer-events : none; }

NgStyle - <a class='icon' [ngStyle]="{'pointer-events': popup_isOpen ? 'none' : 'inherit'}"></a>

2017-10-12 10:28:35

回答