我是靠谱客的博主 老迟到信封，这篇文章主要介绍Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitchAngular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch，现在分享给大家，希望可以做个参考。
Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch
首先，进行Angular环境的搭建和项目创建
ctrl + c 结束服务
1、新建模块
复制代码
1
2ng g component components/home
如图：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpTKDRYZ-1644311674363)(C:Users17216AppDataRoamingTyporatypora-user-imagesimage-20220207163634085.png)]](https://file2.kaopuke.com:8081/files_image/2023052723/21e9a7e85a484e38abb431e90933c198.png)
2、将home模块添加到主页
app.component.html，页面代码如下，没有看错，只有一行
复制代码
1
2<app-home></app-home>
3、Angular数据循环 *ngFor
1）home.component.ts中定义任意类型的数组
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27import { 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，内容如下
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14<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) 启动服务 ，终端输入
复制代码
1
2ng serve --open
4)运行结果如图所示
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYeCxG3g-1644311674366)(C:Users17216AppDataRoamingTyporatypora-user-imagesimage-20220207211918943.png)]](https://file2.kaopuke.com:8081/files_image/2023052723/93b508204ed94ec1a2d2ddd3889c33c7.png)
4、angular条件判断 *ngif 和 *ngSwitch
1)home.component.ts新定义两个变量
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31import { 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，内容如下
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33<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>
运行结果如图：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QPGuMUr5-1644311674368)(C:Users17216AppDataRoamingTyporatypora-user-imagesimage-20220207212211715.png)]](https://file2.kaopuke.com:8081/files_image/2023052723/67f8bd4b492f4f90a1c3a5941b97b083.png)
最后
以上就是老迟到信封最近收集整理的关于Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitchAngular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch的全部内容，更多相关Angular数据循环内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复