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

}

效果

分类: 前端