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

}

 

}

效果：

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;

}

 

}

效果