我是靠谱客的博主 老迟到信封,这篇文章主要介绍Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitchAngular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch,现在分享给大家,希望可以做个参考。

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

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

ctrl + c 结束服务

1、新建模块

复制代码
1
2
ng g component components/home

如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpTKDRYZ-1644311674363)(C:Users17216AppDataRoamingTyporatypora-user-imagesimage-20220207163634085.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
27
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,内容如下

复制代码
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
2
ng serve --open

4)运行结果如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYeCxG3g-1644311674366)(C:Users17216AppDataRoamingTyporatypora-user-imagesimage-20220207211918943.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
31
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,内容如下

复制代码
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)]

最后

以上就是老迟到信封最近收集整理的关于Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitchAngular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch的全部内容,更多相关Angular数据循环内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(76)

评论列表共有 0 条评论

立即
投稿
返回
顶部