结构化指令负责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案例示例