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