Angular 2 中 ngIf 的概念

1. 隱藏 CSS 中的元件與 Angular 2 中的 ngIf
2. Angular 2 中 ngIf 中的表示式
3. 在 Angular 2 中使用 ngIf 的步驟

在 Angular 2 中，ngIf 指令是 Angular 2 中最直接和最有用的指令之一。它用於根據表示式的評估有條件地顯示或隱藏 HTML 元素。

ngIf 指令評估一個表示式，如果它評估為真，它將呈現給定的元素。如果不是，它根本不會渲染該元素。

當多個檢視共享共同特徵時，該指令有助於減少 DOM 元素的數量。

這篇文章將教你關於 ngIf 的一切。

隱藏 CSS 中的元件與 Angular 2 中的 ngIf

即使 HTML 缺少 if 語句，CSS 中的 show 和 visibility 屬性也可用於隱藏頁面的各個部分。

我們可以在 HTML 元素中新增或刪除 CSS 屬性，並使用 JavaScript 從頁面中隱藏元素。但是，這與 ngIf 不同。

如果一個元素隱藏在 ngIf 中，則該元素在頁面上不存在。

如果你使用 Chrome 開發工具調查該頁面，你將不會在 DOM 中看到任何 HTML 元素。

Angular 2 中 ngIf 中的表示式

ngIf 指令接受任何有效的 Typescript 短語作為輸入，而不僅僅是布林值。接下來將評估表示式的徹底性以確定是否應顯示該元素。

除了布林值，我們還可以向 ngIf 傳送文字、陣列和物件。

在 Angular 2 中使用 ngIf 的步驟

在 Angular 2 中使用 ngIf 需要遵循以下步驟：

例子：

讓我們在 Angular 2 中討論一個完整的 ng-if 示例。

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 
    `<h1 *ngIf=" 34< 100" >I'm Adil</h1> 
    <h1 *ngIf="3>1" > I'm John</h1>
    <h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent  {
 }

點選這裡檢視上面程式碼的演示。