指令

指令是为 Angular 应用程序中的元素添加额外行为的类。使用指令可以操作元素。

指令分类：

1. 组件 —— 带有模板的指令。这种指令类型是最常见的。
2. 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令，使用[]包裹。
3. 结构型指令—— 通过添加和删除 DOM 元素来更改 DOM 布局的指令，使用*作为前缀。

内置结构性指令

1. ngIf

   根据条件来决定添加或删除一个元素。这个条件是由你传给指令的表达式的结果决定的，如果结果是假值，则不生成对应的DOM，反之渲染对应的DOM。

   语法：*ngIf=' 条件表达式 '

   xxxxxxxxxx
   <div *ngIf="false">test1</div>
   <div *ngIf="1>2">test2</div>
   <div *ngIf="myFunc()">test3</div>
   

2. ngSwitch

   根据一个给定的条件来渲染不同的元素。

   ngSwitch是属性指令。

   ngSwitchCase，ngSwitchDefault是结构指令。

   ngSwitchDefault是可选的。

   xxxxxxxxxx
   <div [ngSwitch]="myVar">
       <div *ngSwitchCase="'A'">A</div>
       <div *ngSwitchCase="'B'">B</div>
       <div *ngSwitchCase="'C'">C</div>
       <div *ngSwitchDefault>默认值</div>
   </div>
   

3. ngFor

   用来重复一个给定的元素。

   语法：*ngFor='let item of items'，items来自组件实例，item是生成的局部变量。

   获取索引：*ngFor="let item of items; let i=index"

   xxxxxxxxxx
      <table border="1">
       <thead>
         <tr>
           <th>序号</th>
           <th>名字</th>
           <th>年龄</th>
         </tr>
         <tr *ngFor="let person of people;let i=index">
           <th>{{i+1}}</th>
           <th>{{person.name}}</th>
           <th>{{person.age}}</th>
         </tr>
       </thead>
     </table>
   

   xxxxxxxxxx
    this.people = [
         {name:'张三',age:18},
         {name:'李四',age:17},
       ]
   

实时效果反馈

1.下列描述错误的是：

A 结构型指令会更改DOM结构。

B ngFor用来重复ngFor所在的元素的子元素 。

答案

1=>B