Angular 2-指令 - 芒果文档

📌 相关文章

📜 Angular 2-指令

📅 最后修改于: 2020-10-28 05:07:01 🧑 作者: Mango

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

ngif
ngFor

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

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文件中，添加以下代码。

{{appTitle}} Tutorialspoint

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

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

输出

ngIf

ngFor

ngFor元素用于基于For循环的条件的元素。

句法

*ngFor = 'let variable of 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中，定义以下代码。

 
    
      {{lst.ID}} 
      {{lst.Name}}

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

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

输出

ngFor