Angular directive 之 ngIf、ngFor、ngSwitch | 更文挑战第6天

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

*ngIf 使用方法

ngIf 可以对元素进行显示和隐藏，它和 javascript 中使用方法差不多

if(isFruit){
    
}else{
    
}

isFruit是一个布尔类型的变量: isFruit = true;

1. *ngIf表示值为true时显示，false时隐藏

<div
  *ngIf="isFruit; then otherFruit; else animal">
  苹果
</div>

2. *ngIf，then表示值为true时两个都显示，false时隐藏

<div
  *ngIf="isFruit; then otherFruit">
  苹果
</div>

<ng-template #otherFruit>
  <div>
   香蕉
  </div>
</ng-template>

otherFruit是模板名称，可以自定义任何名称。它的作用是让ngIf里面的代码可以抽离出来。

3. *ngIf，then，else表示值为true时ngIf和then两个里的都显示，else里的内容隐藏

<div
  *ngIf="isFruit; then otherFruit; else animal">
  苹果
</div>

<ng-template #otherFruit>
  <div>
   香蕉
  </div>
</ng-template>
<ng-template #animal>
  <div>
    狸花猫
  </div>
</ng-template>

4. ngIf里面使用正则表达式

在ngIf中如何使用正则表达式？可以把要做的判断提取到js里面判断。

<ul *ngFor="let data of testStrings">
    <li *ngIf="judge(data)"> {{ data }} </li>
</ul>

testStrings = ["javascript", "jav", "avaj", "nodejs"];

judge(data){
    return /java/.test(data)
}

*ngFor使用方法

1.一般写法

<div *ngFor="let book of books; 
    let i=index; 
    let isFirst=first;
    let isLast=last;
    let isEven=even;
    let isOdd=odd; 
    trackBy: trackByFunction" >
 
</div>

• let book of books: 循环books，循环的每一项是book
• let i=index：index是当前下标，赋值给 i, 下面的形式相同。
• first：first：是否为第一项，赋值给isFirst
• last: 是否为最后一项
• even： 是否为偶数项
• odd： 是否为奇数项

trackByFunction是一个函数，它的第一个参数是当前的index，第二个是当前的项，它需要返回一个数据，angular看它是否改变来判断这一项是否应该被重新渲染（提升性能）。

trackByFunction(index, book){
    return book.id;
}

上面表示如果id改变了则这一项会重新渲染。

2. 简写

let i=index可以写成index as i

<div *ngFor="let book of books; 
    index as i; 
    first as isFirst;
    last as isLast;
    even as isEven;
    odd as isOdd;" >
 
</div>

或者

<ng-template ngFor let-book [ngForOf]="books" let-i="index">
  {{ book }}
</ng-template>

但是这种写法只能在ng-template上写。

*ngSwitch

1. 用法

<div [ngSwitch]="num">
    <div *ngSwitchCase="0"> 0</div>
    <div *ngSwitchCase="1"> 1</div>
    <div *ngSwitchDefault>默认的</div>
</div>

上面的相当于js

switch(num){
    case 0: return 0;
    case 1: return 0;
    default: return '默认的';
}

2. ngSwitchCase如何写多个条件呢？

<div [ngSwitch]="num">
    <div *ngSwitchCase="0"> 0</div>
    <div *ngSwitchCase="(num === 1 || num===4) ? num : ''"  > 1或者4</div>
    <div *ngSwitchDefault>默认的</div>
</div>

上面的相当于js

switch(num){
    case 0: return 0;
    case 1:
    case 4: return '1或4';
    default: return '默认的';
}

更多用法更新于 github