Angular中的结构指令

结构指令负责DOM元素的结构和布局。它被用来隐藏或显示DOM上的东西。结构指令可以通过’‘来轻松识别。每个结构指令前面都有一个’‘符号。
以下是一些结构性指令的建立与实例。

1. *ngIf:

ngIf用于根据分配给DOM元素的表达式值来显示或隐藏该元素。表达式的值可以是真也可以是假。

语法:

<div *ngIf="boolean"> </div>

在上述句法中，布尔值代表真或假。因此，它导致了以下两种有效的语法。

<div *ngIf="true">  </div>
<div *ngIf="false">  </div>

ngIf的例子：

<div *ngIf="false">
  This text will be hidden
  <h1 [ngStyle]="{'color':'#FF0000'}">
    GFG Structural Directive Example
  </h1>
</div>
<div *ngIf="true">
  This text will be displayed
  <h1 [ngStyle]="{'color':'#00FF00'}">
    GFG Structural Directive Example
  </h1>
</div>

输出:

Angular中的结构指令

*ngIf 示例

2. *ngIf-else:

ngIf-else的工作方式就像一个简单的If-else语句，如果条件为真，那么 “If “DOM元素就会被渲染，否则就会渲染其他DOM元素。Angular使用ng-template和元素选择器，以便在DOM上显示else部分。

语法:

<div *ngIf="boolean; else id_selector">  </div>
<ng-template #id_selector>  </ng-template>

在上述语法中，boolean代表真或假的值。如果布尔值为真，那么If中的元素将在DOM上呈现，否则将在DOM上呈现另一个元素。
ngIf的例子- 否则：

<div *ngIf="false;else id_selector">
  This text will be hidden
  <h1 [ngStyle]="{'color':'#FF0000'}">
    GFG Structural Directive 
    If Part
  </h1>
</div>
<ng-template #id_selector>
  This text will be displayed
  <h1 [ngStyle]="{'color':'#00FF00'}">
    GFG Structural Directive 
    Else Part
  </h1>
</ng-template>

输出:

Angular中的结构指令

*ngIf – else 示例

3. *ngFor:
*ngFor是用来循环浏览DOM中的动态列表的。简单地说，它用于在HTML DOM中建立数据演示列表和表格。

语法:

<div *ngFor="let item of item-list">  </div>

*ngFor的例子：

考虑到你有一个如下所示的列表。

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

<div *ngFor="let item of items">
 <p >  {{item}} </p>
</div>

输出:

Angular中的结构指令

*ngFor example

带有索引的*ngFor的例子-2：
考虑到你有一个如下所示的列表。

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

<div *ngFor="let item of items;let i=index">
 <p >  {{item}} {{i}} </p>
</div>

输出:
这里，索引从’0’开始，而不是’1’。

Angular中的结构指令

有索引的*ngFor

4.*ngSwitch :
ngSwitch用于在*ngSwitchCase内的表达式所定义的多个case语句中进行选择，并据此在DOM元素上显示。如果没有匹配的表达式，将显示默认的案例DOM元素。
语法:

<div [ngSwitch]="expression">
  <div *ngSwitchCase="expression_1"></div>  
  <div *ngSwitchCase="expression_2"></div>  
  <div *ngSwitchDefault></div>  
</div>

在上述语法中，表达式与每个案例进行检查，然后将与表达式匹配的案例呈现在DOM上，否则将在DOM上呈现默认案例。
ngSwitch的例子：

<div [ngSwitch]="'one'">
  <div *ngSwitchCase="'one'">One is Displayed</div>  
  <div *ngSwitchCase="'two'">Two is Displayed</div>  
  <div *ngSwitchDefault>Default Option is Displayed</div>  
</div>

在上面的例子中，ngSwitch中的表达式’one’被匹配到ngSwitchCase中的表达式。因此，DOM上显示的元素是” One is Displayed “。
输出:

Angular中的结构指令