今天完成的事情： 

知道如果应用 双休数据绑定 --mvvm只是针对表单， 在angylar执行事件， angular管道 ，属性[ngclass]和属性[ngstyle]用法。

明天计划的事情：

用今天所学简单做个表单出来
遇到的问题：

代码如下：

HTML代码

后台数据

onkeyup 事件

如果没记错应该是当我松开键盘的时候应该会执行我在里面写的程序打印出来。

图片显示

可问题没有 但如果你换成JQ keydown() 方法的话

HTML代码

效果如下：

它就执行我打印程序不知道原因是什么，难道是angular不能识别js代码只能用JQ方法才能实现吗

收获：

属性[ngclass]应用

语法：

<div [ngClass]="{'red': true}"></div>

ngclass是一个属性，后面的red是css类选择器用来控制改变div标签的属性如改变颜色等，后面的ture /false用来判断是否用red里面的属性

注意事项：

当外面的括号是双引号的时候，里面的类选择器就要单引号用先判断class是否显示这。

编码实战：

首先css样式要先好

.red{

color: red;

}

.blue{

color: blue;

}

.orange{

color: orange;

}

HTML代码

<div class="red">

ngclass演示（尽量不要用dom来改变class）

</div>

<div [ngClass]="{'blue':true,'red': false}">

ngclass 演示样式

</div>

显示结果

我们发现

第一行代码是直接用red选择器类写好的而颜色是红色是直接显示出来的。

第二行是用ngclass属性写的，当类选择器blue后面是true的时候是显示出blue颜色，

而后面red的类选择器是false是直接不用它里面的颜色的。

我们还可以用后台的数据来进行判断：

代码如下：

public flag : boolean = false;//后台数据

HTML代码

<div [ngClass]="{'blue':flag,'orange': !flag}">

ngclass 演示样式

</div>

显示结果

很明显当不等于false显示是orange颜色

public flag : boolean = true;//后台数据

THML代码

<div [ngClass]="{'blue':flag,'orange': !flag}">

ngclass 演示样式

</div>

显示结果

很明显，只要当true的时候才能显示类选择器的属性false的时候是不能显示的

编码实战

通过数组的索引让每个列都显示颜色

代码如下

后台代码

public arr : any[] = [{

name : "肥皂1",

},{

name : "肥皂2",

},{

name : "肥皂3",

}]

HTML代码

<strong>循环数组，让第一个样式为red</strong>

<div *ngFor="let item of arr;let i = index"[ngClass]="{'red': i == 0,'blue': i == 1,'orange': i == 2}">

{{i}}---{{item.name}}

</div>

Let i = index（这是返回索引值显示是数组第几个）

结果显示

属性[ngStyle]

[ngStyle]和[ngclass]是类似的。

在css里面 style属性是可以在标签里面直接插入csss属性的

代码如下：

<div style="color: red;font-size: 30px;" >实验1</div>

显示效果:

而angular属性写法

基本用法：

<div [ngStyle]="{'color': 'blue'}">实验2</div>

显示效果

注意

在color后面的属性值也得加上单引号。

后台数据：

public color : string = '30px';

HTML

<div [ngStyle]="{'font-size': color}">实验2</div>

显示结果

注意

在写angular属性[ngStyle] 后面的属性值不能加引号原因好像应该是它是数据而不是属性值。

在有个属性值的时候把他们分开在css里面用的是(;)分号，而angualr用是(,)逗号

angular管道

就是将原始值转化为显示值？

代码如下

<div>{{today | date:'yyyy-MM-dd HH:mm ss'}}</div>

后台数据

public today: any = new Date();

Date()返回时间以及日期年月日

效果展示：

这个函数是在angular已经写好的直接拿过来调用的。

angular执行事件

在angular执行事件的标准

在JS的时候我们一般用dom元素节点来调用JS方法里面的程序代码如下：

<button onclick="jump()">去发牌</button>

点击按钮获得jump的执行程序。

或者用DOM方法来获取程序

代码如下：

THML代码

<div class="add"></div>

JS代码

var add = document.getElementsByClassName("add")[0];

add.onclick = function () {

inputRange.value++;

inputText.value++;

console.log(inputText.value);

if (inputText.value < 4 || inputText.value > 18) {

inputText.value = 18;

alert("数值不能大于十八");

}

然后在通过元素节点来获取创建的函数，通过点击事件来调用这个函数里面编程好的程序

而angular执行事件和上面JS的执行事件方法是一样的。

代码如下：

后台数据

constructor() {

console.log(this.today);

}

ngOnInit() {

}

a() {

alert("点击我")

}

}

首先创建一个函数名称为a 编写里面的程序显示当点击的时候执行里面的程序显示页面弹窗。

HTML代码

<button (click)="a()">点击我</button>

注意angular点击事件用法是通过()括号来表达的，后面双引号是创建函数。

执行效果如下

获取后台数据写法

public cs: any = "点击我获取数据";

a() {

alert(this.cs)

}

就和上面显示一样的。

改变数据

THML代码如下

<div>{{cs}}</div>

<button (click)="a()">点击我改变数据</button>

后台代码

public cs: any = "点击我获取数据";

a() {

this.cs = "肥皂";

}

改变前

点击改变后

事件对象

HTML代码如下

<H1>表单事件 事件对象</H1>

<input type="text" (keydown) = "onkeyup()" />

后台数据

onkeyup(){

console.log("当用户输入时候出现该事件");

}

}

效果展示

事件对象

HTML代码

<H1>表单事件 事件对象</H1>

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

后台数据

onkeyup(e){

console.log(e);

}

效果展示

可以看到a的键盘数字是65，而里面还有很多有用的信息

$event属于固定写法。获取按键对象的信息。

这些信息可以写各种判断如

onkeyup(e){

if(e.keyCode == 13){

console.log("我按了一下回车");

}

因为刚刚获得的对象数据回车的数字是13那么就可以根据这个数值来进行判断是否按了下回车。

来看下其他代码效果

<H1>表单事件 事件对象</H1>

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

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

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

onkeyup(e){

if(e.keyCode == 13){

console.log("我按了一下回车");

} else{

console.log(e);

console.log(e.keyCode);

console.log(e.target);

console.log(e.target.value);

}

可以看到有些字母是没有打印出来的是因为

上面和最下面2个，一个是表示键盘按下的过程触发写的编程代码，一个是键盘按下触发编程代码，而中间那个是键盘松开触发编程代码。

然后 事件对象的信息 如target是标签节点 然后根据这个标签可以做很多事情

如改变某个按钮的颜色

代码如下：

<button (click)="color1($event)">按钮1</button>

<button (click)="color1($event)">按钮2</button>

<button (click)="color1($event)">按钮3</button>

后台数据

color1(r){

var dom = r.target;

console.log(r.target);

dom.style.color = "red";

}

效果展示

这是因为r.target直接获取点击标签，然后在通过内联式css样式，直接写在现有的HTML标签中。

双休数据绑定--MVVM 只是针对表单

用法如下

<h1>双休数据绑定--MVVM 只是针对表单</h1>

<input type="text" [(ngModel)]="name">

{{name}}

效果如下

它会影响你绑定那个name属性值，

注意要用这个自带模块需要以下几步

第一步找到app.module.ts

第二步点开

引用这个双向绑定模块

这个是你需要自己打上去的 在打完后还要在imports里面声明后才能引用。

JS任务一深度思考

定时器有哪些用法？

我了解下定时器处了setInterval（）还有setTimeout()和clearTimeout()

setTimeout()语法

setTimeout(function(){ alert("Hello"); }, 3000);

clearTimeout()方法是阻止setTimeout()运行的。

而setTimeout()方法只能是用一次也就是所它使用一次后就不会自动在执行程序了

而setInterval（）是可以无线执行的代码如下

而setInterval（）语法阻止是clearInterval() 方法

语法如下

myVar = setInterval("javascript 函数", milliseconds);

注意

他们的函数调用全部要用全局变量就是你要在最开始创建一个 var name ;的全局变量才能引用这些定时器语法。