在 Angular 中顯示和隱藏

我們將介紹在 Angular 中顯示和隱藏元件或元素的示例。

在 Angular 中顯示和隱藏

在開發商業應用程式時，我們需要根據使用者角色或條件隱藏一些資料。我們必須根據該應用程式中的條件顯示相同的資料。

在本教程中，我將向你展示一種簡單的方法，使用它我們可以根據條件顯示和隱藏資料。

讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# angular
ng serve --open

假設我們有一個模板或一段程式碼，我們只想在條件為真時顯示，在條件為假時隱藏它。我們可以使用此示例顯示和隱藏它。

首先，我們將在 app.component.html 中建立一個包含標題、段落和輸入欄位的演示內容，並將其包裝在 div 中。

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

現在，在 app.component.ts 中，我們建立一個新變數 element 並將其設定為 false。

# Angular
element = false;

我們將根據條件使用*ngIf 顯示和隱藏我們的 div。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

如上例所示，我們設定了一個條件，如果 element 為 true，則顯示 div，如果條件為 false，則不顯示。

因此，div 將被隱藏，因為我們已將 element 設定為 false。現在，讓我們將 element 的值更改為 true 並檢查它是如何工作的。

輸出：

你現在可以看到，當我們更改 element 的值時，我們在 div 上設定的條件發生了變化，它開始顯示 div 及其內部的所有元素。

想象一下，如果我們想在單擊某些按鈕時顯示和隱藏資料。我們可以使用相同的 *ngIf 建立這個簡單的示例。

現在，讓我們建立兩個具有兩個函式 showData() 和 hideData() 的按鈕。我們需要在 div 之外建立這兩個按鈕，這樣當條件更改為 false 時它們不會被隱藏。

因此，我們在 app.component.html 中的程式碼將如下所示。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

現在，讓我們在 app.component.ts 中建立這兩個函式。showData() 將 element 的值更改為 true 和 hideData() 將 element 的值更改為 false。

因此，程式碼將如下所示。

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

我們現在將新增一些 CSS 程式碼以使我們的按鈕看起來不錯。

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

讓我們看看它是如何工作的。

輸出：

正如你在上面的示例中所看到的，我們可以使用 *ngIf 和按鈕 (click) 方法輕鬆隱藏和顯示內容。

如果我們想在內容隱藏時隱藏 Display Data 按鈕，在資料被隱藏時隱藏 Hide Data 按鈕，我們也可以在按鈕上使用相同的概念。

所以我們建立一個*ngIf 條件，如果 element 為 true，則僅顯示隱藏資料按鈕，當 element 為 false 時，將顯示顯示資料按鈕。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

我們不需要在 app.component.ts 檔案中編寫任何程式碼行，因為我們建立的函式和 *ngIf 函式將幫助我們在按鈕上完成相同的操作。所以，讓我們檢查一下它現在是如何工作的結果。

輸出：

所以，在本教程中，我們學習瞭如何使用*ngIf 根據條件隱藏和顯示內容，還學習瞭如何使用按鈕的 (click) 方法來幫助我們隱藏和顯示按鈕上的資料點選。