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>

运行结果如图：

Angular数据循环 ngFor 与条件判断 ngif 和 *ngSwitch相关推荐

Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
R语言dplyr包的mutate函数将列添加到dataframe中或者修改现有的数据列：基于条件判断创建布尔型指示变量、将异常离散编码转化为NA值
R语言dplyr包的mutate函数将列添加到dataframe中或者修改现有的数据列:基于条件判断创建布尔型指示变量.将异常离散编码转化为NA值目录
continue语句只用于循环语句中_Java之循环语句、条件判断语句（三目运算符）、break、continue...
之前的内容只是让读者可以定义变量,输出变量等基础功能而已.这远远是不够的,今天,我们学习的内容可以帮你开始完善自己想开发的内容,在这之前我们先理解一个概念:一个表达式的返回值是布尔值的表达式称为布尔 ...
while 循环、if 条件判断，同心协力打造「模拟“春节集五福”活动」程序
while 循环, if 条件判断组合发力解题.根据近两年流行的春节集五福活动,编写一个模块,实现模拟春节集五福的过程. [学习的细节是欢悦的历程] Python 官网:https://www.pyt ...
python 运行电脑卡死_Python入门 5——循环语句及条件判断
一.什么是语句最基本的语句:赋值语句.运行函数/方法条件语句:if 循环语句:for/while循环,遍历序列/字典函数语句:def函数等模块语句:import 二.条件判断:if语句 1.基 ...
vue中给v-for加条件判定（vue中v-for循环列表根据条件判断两边对齐效果（常用））
首先上图解释: 黑框元素宽width:22%: 循环给每个黑框添加class(也就是添加margin-left:4%:margin-top:20px): 因为最左边一竖排我们不需要添加class ...
Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）
1. Angular 图片.条件判断(*ngIf.[ngSwitch].属性[ngClass].[ngStyle]) 1.1 图片 1.1.1 本地图片: 我们在assets目录下面新建images文 ...
5、条件判断语句和while循环语句
条件判断和while循环条件判断条件判断语句(if语句) input() 函数 if-else语句 if-elif-else 语句循环控制 while语句 break和continue whil ...
【Shell教程】四----输入输出，条件判断，循环
Shell输出 echo命令在shell中,echo 指令用于字符串的输出命令格式: echo string 可以使用 (反斜号)''(单引号)""(双引号)包含字符串,具体功 ...

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

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

ctrl + c 结束服务

1、新建模块

2、将home模块添加到主页

3、Angular数据循环 *ngFor

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

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

3) 启动服务，终端输入

4)运行结果如图所示

4、angular条件判断 ngif 和 ngSwitch

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

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

Angular数据循环 ngFor 与条件判断 ngif 和 *ngSwitch相关推荐

最新文章

热门文章

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

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

ctrl + c 结束服务

1、新建模块

2、将home模块添加到主页

3、Angular数据循环 *ngFor

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

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

3) 启动服务 ，终端输入

4)运行结果如图所示

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

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

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

Angular数据循环 *ngFor 与 条件判断 *ngif 和 *ngSwitch相关推荐

最新文章

热门文章

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

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

3) 启动服务，终端输入

4、angular条件判断 ngif 和 ngSwitch

Angular数据循环 ngFor 与条件判断 ngif 和 *ngSwitch相关推荐