【angular】指令及数据绑定入门

指令，数据绑定

• 指令分类

1. 内置属性指令：

ngClass

<!--divclass是一个对象，其中包含了你所需要设置的多个Class信息--><div [ngClass]="divClass2">属性绑定同时管理多个class</div>

ngStyle

<!--divStyle是一个对象，其中包含了你所需要设置的多个属性信息--><div [ngStyle]="divStyle" >属性绑定同时管理多个style属性</div>

2.内置结构指令：

*ngFor

<!--users是一个数组，来遍历渲染dome元素--><div *ngFor="let user of users">  <p>名字：{{user.userName}}</p></div>

*ngIf

<!-- ngIf  当isShow = true  这是元素则显示。--><div *ngIf="isShow">显示与隐藏</div>

*ngIf

<!--ngSwitch,ngSwitchCase,ngSwitchDefault bi则是一个变量，当ngSwitchCase的变量不等于bi变量则不会被显示出来，而当所有的ngSwitchCase变量都不等于bi则ngSwitchDefault上的元素就会被显示出来--><div [ngSwitch]="bi">  <p *ngSwitchCase="'fn1'">fn1</p>  <p *ngSwitchCase="'fn2'">fn2</p>  <p *ngSwitchDefault>以上都不是</p></div>

- 数据绑定

1. 插值表达式：

{{变量}}

<!--插值表达式：是由两个大花括号加一个变量组成的，这个变量值会被渲染；--><p>{{ name }}</p>

2.属性绑定：

[src]=’变量’

<!--属性绑定语法--><img [src]="imgUrl" style="width: 100px;height: 100px" /><!-- 插值表达式和属性绑定是一样的 --><img src="{{imgUrl}}" style="width: 100px;height: 100px" />

3.事件绑定：

(click)=”方法()”

<!-- 事件绑定语法 $event是dome原生属性 --><input (click)="toEvent($event)" type="button" value="事件绑定按钮"/>

[(ngModel)]

<!-- 注意：使用ngModel 需要在app.module.te引入 import { FormsModule } from '@angular/forms';  否则会报错。 --><input [(ngModel)]="name">

---

angular、spring cloud 开源实战项目源码：https://gitee.com/xfdm/FCat
QQ群：549141844

代码持续更新…