极客angular知识分享（2）--内置指令（下）

内置指令（下）

 

ngFor

1. 用法

<div *ngFor="let item of expr">
</div>

2. 意义：将数组中的对象生成同一组元素
3. 代码

myArr = [1,3 ,4, 'ff'];
<!-- ngFor -->
<div *ngFor="let item of myArr">
数据元素值：{{item}}
</div>

4. 模板变量
   index:数组对象的索引
   odd:是否是奇数位置对象
   even:是否为偶数位置对象
   first:是否第一个位置对象
   last:是否是最后一个位置对象

<div *ngFor="let item of myArr; let i=index; let isOdd = odd; let isEven=even; let isFir=first;
<div *ngIf="isOdd" style="color:red;">索引：{{i}}---> 值： {{item}}
<span *ngIf="isFir" style="color:blue;">这是第一行</span>
<span *ngIf="isLast" style="color:blue;">这是最后行</span>
</div>
<div *ngIf="isEven" style="color:green;">索引：{{i}}---> 值： {{item}}
<span *ngIf="isFir" style="color:blue;">这是第一行</span>
<span *ngIf="isLast" style="color:blue;">这是最后行</span>
</div>
</div>

5. 防止显示显示系统元素重复加载
 

// 有两参数
getKey(index:number, item:any){
return item;
}

<div *ngFor="let item of myArr; let i=index; let isOdd = odd; let isEven=even; let isFir=first;
trackBy:getKey">
<div [class.bg-primary]="isOdd" [class.bg-info]="isOdd" [class.bg-warning]="isFir||isLast
</div>
</div>

ngTempletOutlet

1. 用法

<ng-templet [ngTempletOutlet]="mytemplet">
</ng-templet>

2. 意义：指定位置重复同一个内容块
3. 代码

<!-- ngTempletOutlet -->
<ng-template #mytemplet >
<div class="bg-primary">固定内容块</div>
</ng-template>
<div *ngTemplateOutlet="mytemplet"></div>
<ng-template [ngTemplateOutlet]="mytemplet"></ng-template>
<div *ngFor="let item of myArr; let i=index; let isOdd = odd; let isEven=even; let isFir=first;
<div *ngIf="isOdd" style="color:red;">索引：{{i}}---> 值： {{item}}
<span *ngIf="isFir" style="color:blue;">这是第一行</span>
<span *ngIf="isLast" style="color:blue;">这是最后行</span>
</div>
<div *ngIf="isEven" style="color:green;">索引：{{i}}---> 值： {{item}}
<span *ngIf="isFir" style="color:blue;">这是第一行</span>
<span *ngIf="isLast" style="color:blue;">这是最后行</span>
</div>
</div>
<div *ngFor="let item of myArr; let i=index; let isOdd = odd; let isEven=even; let isFir=first;
trackBy:getKey">
<div [class.bg-primary]="isOdd" [class.bg-info]="isOdd" [class.bg-warning]="isFir||isLast
</div>
</div>

4. 提供上下文

<ng-template #mytemplet let-text="title">
  <div class="bg-primary">固定内容块：{{text}}</div>
</ng-template>

<ng-template [ngTemplateOutlet]="mytemplet" [ngTemplateOutletContext]="{title:'Footer'}"></ng-template>

※无论是宿主元素还是绑定元素ng-template，都不会包含在html文档中