Angular 2 - 指令

指令是用于扩展HTML功能的自定义HTML元素。Angular 2 具有以下指令，它们作为 BrowserModule 模块的一部分被调用。

ngIf
ngFor

如果您查看 app.module.ts 文件，您将看到以下代码和定义的 BrowserModule 模块。通过定义此模块，您可以访问这两个指令。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

现在让我们详细了解每个指令。

ngIf

ngIf 元素用于在表达式计算结果为true时将元素添加到HTML代码中，否则不会将元素添加到HTML代码中。

语法

*ngIf = 'expression'

如果表达式计算结果为true，则添加相应的元素；否则，不添加元素。

现在让我们来看一个如何使用 *ngIf 指令的示例。

步骤 1 - 首先向名为 appStatus 的类添加一个属性。这将是布尔类型。让我们将其值设置为 true。

import { Component } from '@angular/core';  

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

步骤 2 - 现在在 app.component.html 文件中，添加以下代码。

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

在上面的代码中，我们现在使用了 *ngIf 指令。在指令中，我们正在评估 appStatus 属性的值。由于属性的值应计算为 true，这意味着 div 标签应显示在浏览器中。

添加上述代码后，我们将在浏览器中获得以下输出。

输出

ngFor

ngFor 元素用于根据 For 循环的条件添加元素。

语法

*ngFor = 'let variable of variablelist'

变量是一个临时变量，用于显示variablelist中的值。

现在让我们来看一个如何使用 *ngFor 指令的示例。

步骤 1 - 首先向名为 appList 的类添加一个属性。这将是可用于定义任何类型数组的类型。

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

因此，我们将 appList 定义为具有 2 个元素的数组。每个元素都有 2 个子属性：ID 和 Name。

步骤 2 - 在 app.component.html 中，定义以下代码。

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

在上面的代码中，我们现在使用 ngFor 指令迭代 appList 数组。然后，我们定义一个列表，其中每个列表项都是数组的 ID 和 name 参数。

添加上述代码后，我们将在浏览器中获得以下输出。

输出

打印页面