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

效果