angular中从0到1：条件语句ngIf、ngSwitch的使用

0.前言

angular中的if在，一种是 *ngIf=”expression” ,一般写在html中。这篇文章主要记录*ngIf的几种用法。

1. ngIf用法

1.1可以用作显示和隐藏

HTML

<div *ngIf="isShow" >
        窗前明月光
    </div>
<button (click)="change()">显示/隐藏</button>

TS

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
  
})
export class MenuComponent implements OnInit {
  isShow=true

  constructor() { 

  }
  ngOnInit(): void {

  }
  change(){
    this.isShow=!this.isShow
  }

}

效果：

ngIf可以有稍微复杂的写法。比如

两个表达式判等，那么在ts中，a和b就是两个表达式或者变量。

HTML:
<div *ngIf="a==b" >
        窗前明月光
    </div>
<button (click)="change()">显示/隐藏</button>

TS:
export class MenuComponent implements OnInit {
  a='12'
  b='apple'
  constructor() { 

  }
  ngOnInit(): void {

  }

}

当然，也可以改成下面的形式：

HTML:
<div *ngIf="a=='apple'" >
        窗前明月光
    </div>
<button (click)="change()">显示/隐藏</button>

TS:
export class MenuComponent implements OnInit {
  a='12'
  constructor() { 

  }
  ngOnInit(): void {

  }

}

这样通过单引号的形式把变量包含进来，可以直接判断表达式是不是等于某个字符串。

1.2可以和else搭配使用

HTML

 <div *ngIf="isShow; else notShow ">
        这是ture的情况
    </div>
    <ng-template #notShow>
        <div>
            这是false的情况
        </div>
    </ng-template>
    <button (click)="change()">显示/隐藏</button>

TS

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
  isShow=true
  constructor() { 

  }
  ngOnInit(): void {

  }
  change(){
    this.isShow=!this.isShow
  }
}

效果:

1. ngSwitch

HTML

 <div>
        <span [ngSwitch]="status">
            <p *ngSwitchCase="1">
                这是1的情况
            </p>
            <p *ngSwitchCase="2">
                这是2的情况
            </p>
            <p *ngSwitchCase="3">
                这是3的情况
            </p>
            <p *ngSwitchDefault>
                这是4的情况(默认)
            </p>
        </span>
    </div>
    <button (click)="change()">显示/隐藏</button>

TS

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
  
})
export class MenuComponent implements OnInit {
  status=1

  constructor() { 

  }
  ngOnInit(): void {

  }
  change(){
    this.status++;
    if(this.status==5)
       this.status=1;
  }

}

效果