Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch

Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch

首先，进行Angular环境的搭建和项目创建

ctrl + c 结束服务

1、新建模块

ng g component components/home

如图：

2、将home模块添加到主页

app.component.html，页面代码如下，没有看错，只有一行

<app-home></app-home>

3、Angular数据循环 *ngFor

1）home.component.ts中定义任意类型的数组

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

//定义一个数组 
public list:any[]=[
  {
    "title":'happy day'
  },{
    "title":'good days'
  },{
    "title":'exciting days'
  }
] 
constructor() { }

  ngOnInit(): void {
  }

}

2）编辑 home.component.html，内容如下

<h1>数据循环并显示数据的索引</h1>
<h2>数据循环</h2>
<ul>
    <li *ngFor="let item of list">
        {{item.title}}
    </li>    
</ul>
<h2>数据循环并显示数据索引</h2>
<ul>
    <li *ngFor="let item of list;let key=index;">
        {{key}}---{{item.title}}
    </li>
</ul>

3) 启动服务 ，终端输入

ng serve --open

4)运行结果如图所示

4、angular条件判断 *ngif 和 *ngSwitch

1)home.component.ts新定义两个变量

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

//定义一个任意类型的数组 
public list:any[]=[
  {
    "title":'happy day'
  },{
    "title":'good days'
  },{
    "title":'exciting days'
  }
] 
//定义一个bollean类型的变量
public flag:boolean=true;
//定义一个number类型的变量
public num:number=2;      //num为1时，输出“你好世界”； num为2时，输出“have a good day!”
constructor() { }

  ngOnInit(): void {
  }

}

2)编辑 home.component.html，内容如下

<h1>数据循环并显示数据的索引</h1>
<h2>数据循环</h2>
<ul>
    <li *ngFor="let item of list">
        {{item.title}}
    </li>    
</ul>
<h2>数据循环并显示数据索引</h2>
<ul>
    <li *ngFor="let item of list;let key=index;">
        {{key}}---{{item.title}}
    </li>
</ul>
<hr>
<h1>条件判断语句 *ngIF 和 *ngSwitch</h1>

<h2>条件判断语句*ngIF</h2>
<div *ngIf="flag">
    条件为真
</div>
<div *ngIf="!flag">
    条件为假
</div>
<h2>条件判断语句 *ngSwitch</h2>
<div [ngSwitch]="num">
    <div *ngSwitchCase="1">
        你好世界
    </div>
    <div *ngSwitchCase="2">
        have a good day
    </div>
</div>

运行结果如图：