ngIf

[deepthan]

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>

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)
}