场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目，怎样进行简单的逻辑判断等。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

数据循环ngFor

首先声明一个数组

public list1 = ["霸道","流氓","气质"]

然后在html中

<ul><li *ngFor="let item of list1">{{item}}</li>
</ul>

效果

还可以使用Index获取其索引

<ul><li *ngFor="let item of list1;let i =index;">{{item}}--{{i}}</li>
</ul>

条件判断ngIf

利用上面的list1的长度作为判断条件

<p *ngIf="list1.length >3">如果list1长度>3则显示</p>
<p *ngIf="list1.length == 3">如果list1长度==3则显示</p>
<p *ngIf="list1.length < 3">如果list1长度<3则显示</p>

选择语句ngSwitch

首先声明状态属性

 public state = "2"

然后在html中

switch的结果是：<br>
<ul [ngSwitch]="state"><li *ngSwitchCase="1">霸道</li><li *ngSwitchCase="2">流氓</li><li *ngSwitchCase="3">气质</li><li *ngSwitchDefault>气质</li>
</ul>

效果

执行事件click

首先在html中添加一个Button并绑定其点击事件为getData()方法

<button class = "button" (click) = "getData()">点击获取数据</button>

然后在ts中

public title = "霸道流氓气质"getData(){alert(this.title);}

效果

表单事件

在html中添加一个input并绑定它的keyup事件，并且通过$event获取参数

<input type ="text" (keyup)="keyup($event)"/>

然后在ts中

  keyup(e){console.log(e);}

运行并在输入框中随便输入

ngClass

给div绑定提前声明好的样式，首先打开scss文件，声明两个红绿样式

.red {color: red;}.blue {color: blue;}

然后打开ts文件声明一个flag

public flag = false;

最后在html中

<div [ngClass] ="{'red':flag,'blue':!flag}">ngClass的Div</div>

然后运行看效果

ngStyle

如果不想提前声明好样式而是直接在代码中设置样式，可以这样

<div [ngStyle]="{'background-color':'red'}">霸道流氓气质</div>

Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用相关推荐

在c51语言的循环语句中用作循环结束,在C51语言的循环语句中,用作循环结束条件判断的表达式为()...
的任营领域都个战企业为结何一合的略经是以,语言用作战略经营须综合考领域虑这两个分析方面时必,. 循的表达式的一参与资产战略个以共同个独企业企业建立就是或两两个立的联盟上的. 环语对方的盟就盟各一家业( ...
Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch
Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch 首先,进行Angular环境的搭建和项目创建 ctrl + c 结束服务 1.新建模块 ng g compone ...
事实、循环、条件判断
文章目录事实.循环.条件判断 1.描述Ansible事实 2.ansible事实作为变量注入 3.关闭事实收集 4.创建自定义事实 5.魔法变量 6.利用循环迭代任务 7.循环散列或字典列表 8.较 ...
oracle sql循环判断语句怎么写,Oracle 非常详细的 PL/SQL入门教程,PL/SQL语法格式/循环语句/条件判断/异常处理...
PL/SQL入门教程目录 Oracle PL/SQL入门教程,PL/SQL语法格式/循环语句/条件判断/异常处理一.PL/SQL简介 1.PL/SQL简介 1.PL/SQl是过程语言PL与结构化语言 ...
Python基础---循环、条件判断
循环.条件判断: 条件判断: 每条if语句的核心都是一个值为True或False的表达式通常情况下,if条件判断配合for循环,while循环使用语法:if ... 如果满足if后的判断条件,则执 ...
python条件判断true_Python中的True,False条件判断实例分析
本文实例讲述了Python中的True,False条件判断用法.分享给大家供大家参考.具体分析如下: 对于有编程经验的程序员们都知道条件语句的写法: 以C++为例: 代码如下: if (conditi ...
if函数多个条件php,EXCEL中IF函数多条件判断怎么写
在表格函数的运用中,"IF"函数我们经常用到,往往我们用"IF"判读多个条件时,运用的是多级嵌套的方式.然而,我们需要多个条件,只需满足其中一个条件时就返回真值 ...
js中的循环(跳过(continue)和中断执行(break))
js中的循环(跳过(continue)和中断执行(break)) js循环中可以在循环时是可以中断后续执行和跳过的看下面这个栗子 //计算1~100之间的和 //我们没有学习过循环之前,使用的做法, ...
R语言write.xlsx函数将数据写入Excel文件：写入Excel文件并自定义表单的名称、将数据写入Excel文件新的表单（sheet）中、将文件保存为xls文件格式(而不是xlsx)
R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称.将数据写入Excel文件新的表单(sheet)中.将文件保存为xls文件格式(而不是xlsx) 目录

Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用

场景

实现