如何顯示和隱藏動態按鈕在Angular 2中觸發的動態div

我使用click事件和一些普通的javascript獲得了這項工作，但我確信有更好的方法。如何顯示和隱藏動態按鈕在Angular 2中觸發的動態div

我使用ngFor生成了一些動態行和相應的動態按鈕。

他們看起來像這樣：

<div *ngFor="let section of data.order?.sections" id="{{section.class}}Detail" class="{{section.name | lowercase | removeAmpersand | removeSpaces }}">Random Text Here</div>

然後在其他地方的頁面上有使用ngFor也產生了錨標記列表：

<a (click)="showDetails($event)" id="{{section.name | lowercase | removeAmpersand | removeSpaces }}"><span class="icomoon icomoon-eye"></span> Detail/a>

我的問題是，什麼是首選我可以展示和隱藏div的方式？每個div都以display: none的css屬性開頭，我希望能夠切換。相反，我只是用click事件來運行得到DIV ID的功能，然後我有一些純JavaScript，看起來像這樣：

myDiv.style.display = myDiv.style.display === '' ? 'block' : '';

我應該怎麼做，這將是首選的方法？

來源

2016-07-15 Jason Shultz

你可以有條件地添加CSS類到你的元素。喜歡的東西

<div class="standardclass" [class.additionalclass]="showFlag"></div>

其中additionalclass是如果表達式showFlag是事實，將只被添加另一CSS類。它可以是任何js表達式，而不僅僅是一個標誌。

您還可以使用*ngIf來完全有條件地添加或刪除dom中的元素。

搜索「角2模板語法」

來源

2016-07-15 03:09:34 hholtij

這將如何工作多個div？例如。我有一個專業級的硬件，另一個有專業的服務，最後是解決方案。現在，我有兩個按鈕，一個用於顯示硬件，另一個用於服務和最終解決方案，但每個按鈕都在循環中並且是動態生成的。也許這張發票沒有服務，但它確實有硬件和解決方案。因爲我事先不知道，它需要是可以用來顯示它的各個部分但不影響其他部分的東西。 –

如果我正確理解你，你基本上需要一堆標誌。如果你在一個循環中創建所有的東西，那麼可能會有一個標誌數組。如果您在* ngFor中創建按鈕，則可以獲取可用於索引標誌數組的索引。這聽起來很直截了當。 – hholtij

您可以爲您的部分模型，然後綁定在foreach到模型，並作爲模型的一部分，你可以有知名度，你可以用一個布爾在你的循環中決定隱藏或顯示。

您的按鈕會切換可見的布爾值，然後您可以依賴Angular2在模型更改時更新UI。

將代碼更改爲這種風格會有點麻煩，但優點包括更清晰的html，可能更好的可維護性和單元測試的能力。

來源

2016-07-15 03:36:06

如何顯示和隱藏動態按鈕在Angular 2中觸發的動態div

回答

相關問題