📜  角度结构指令

📅  最后修改于: 2021-05-13 20:51:45             🧑  作者: Mango

结构化指令负责DOM元素的结构和布局。它用于隐藏或显示DOM上的内容。使用“ *”可以轻松识别结构指令。每个结构指令前面都带有一个“ *”符号。
以下是一些带有示例的结构化指令构建:

1. * ngIf:

ngIf用于根据分配给它的表达式值显示或隐藏DOM元素。表达式值可以为true或false。

句法:

在上面的语法中,布尔值代表true或false值。因此,它导致以下两种有效语法:

* ngIf的示例:

  This text will be hidden   

    GFG Structural Directive Example   

  This text will be displayed   

    GFG Structural Directive Example   

输出:

* ng如果示例

2. * ngIf-else:

ngIf-else的工作方式类似于简单的If-else语句,其中,如果条件为true,则呈现“ If” DOM元素,否则呈现另一个DOM元素。 Angular将ng-template与元素选择器一起使用,以便在DOM上显示else部分。

句法:

在上面的语法中,布尔值代表true或false值。如果布尔值是true,则If中的Element呈现在DOM上,否则另一个元素呈现在DOM上。
* ngIf- else的示例:

  This text will be hidden   

    GFG Structural Directive      If Part   

  This text will be displayed   

    GFG Structural Directive      Else Part   

输出:

* ngIf – else示例

3. * ngFor:
* ngFor用于遍历DOM中的动态列表。简而言之,它用于在HTML DOM中构建数据表示列表和表。

句法:

* ngFor的示例:

考虑您具有如下所示的列表:

items = ["GfG 1", "GfG 2", "GfG 3", "GfG 4"];
 

  {{item}}

输出:

* ng例如

带索引的* ngFor的示例2:
考虑到您具有如下所示的列表:

items = ["GfG ", "GfG ", "GfG ", "GfG "];
 

  {{item}} {{i}}

输出:
在这里,索引从“ 0”而不是“ 1”开始

* ngFor与索引

4. * ngSwitch:
ngSwitch用于在* ngSwitchCase内部的表达式所定义的多个case语句之间进行选择,并根据此显示在DOM元素上。如果没有匹配的表达式,则显示默认情况下的DOM元素。
句法:

在上面的语法中,将对每种情况检查表达式,然后在DOM上呈现与表达式匹配的条件,否则在DOM上呈现Default情况。
* ngSwitch的示例:

  
One is Displayed
     
Two is Displayed
     
Default Option is Displayed
  

在上面的示例中,ngSwitch中的表达式“ one”与ngSwitchCase中的表达式匹配。因此,在DOM上显示的元素是“一个被显示”。
输出:

ngSwitch案例示例