您的位置: 首页  >  文章  >  Angular学习笔记-数据绑定

Angular学习笔记-数据绑定

分类: 文章 • 2024-10-12 17:48:57

数据绑定

Angular默认使用单向数据绑定，双向数据绑定可选。
（单向数据绑定：只从controller的值绑定到view，再view更改数据值并不会改变所有该数据的值）

数据绑定分为3种绑定形式

  • 事件绑定
  • DOM属性绑定
  • HTML属性绑定

事件绑定

给一个事件指定一个处理方法
Angular学习笔记-数据绑定

  • 等号右侧可以不是调用方法，可以是属性赋值 形如<button (click)="saved = true">
  • 被绑定的事件可以是标准的DOM事件，也可以是任意事件

DEMO

//html
<button (click)="doOnClick($event)">click me</button><br>
//ts
 doOnClick(event: any) {
    console.log(event);
  }

Dom属性绑定

插值表达式=DOM属性绑定

//html
<!-- DOM属性绑定 -->
<img [src]="imgUrl" />
<!-- 插值表达式 -->
<img src={{imgUrl}} />
//ts
imgUrl: string = "http://placehold.it/400x220";

HTML属性绑定

在没有DOM属性可绑定的情况下使用HTML属性绑定

绑定语法
第一种 基本HTML属性绑定
Angular学习笔记-数据绑定

//html
<td [attr.colspan]="colspan">Something</td>
//ts
colspan:number = 10;

第二种 CSS类绑定
Angular学习笔记-数据绑定
Angular学习笔记-数据绑定
最后一个为多个样式绑定

//html:
<span class="yellow" [class]="newClass">第1段段测试文字</span>
//ts:
newClass:string = 'red blue';

//html:
<span [class.yellow]="isYellow">第2段测试文字</span>
//ts:
setTimeout(()=>{
    this.isYellow = true;
},3000);

//html:
<span [ngClass]="divClass">第3段测试文字</span>
//ts:
setTimeout(()=>{
    this.divClass = {
        red:true,
        yellow:true 
    }
},3000);

第三种 样式绑定
Angular学习笔记-数据绑定

单个样式绑定

//html:
<span [style.color]="isDev?'red':'blue'">style样式测试1</span>
<span [style.font-size.em]="isDev?'1':'3'">style样式测试2</span>
//ts:
isDev:boolean = false;
  ngOnInit() {
    setTimeout(()=>{
        this.isDev = true;
    },3000);
  }

多个样式绑定 {key:value}, key是样式属性值，value是实际可用的值。如：{color:’red’}

//html:
<span [ngStyle]="divStyle">style样式测试333</span>
//ts:
divStyle:any = {
    color:'red',
    background:'yellow'
}

HTML属性不等同于Dom属性

少量HTML属性和DOM属性之间，如colspan
有些DOM属性没有对应的HTML属性，如textContent
就算名字相同，HTML属性和DOM属性也不是同一样东西
HTML属性的值指定了初始值；DOM属性的值表示当前值
DOM属性的值可以改变，HTML属性的值不能改变
模板绑定是通过DOM属性和事件来工作的，而不是HTML属性

//html
<input value="tom" (input)="onInput($event)">
//ts
onInput(event){
  console.log(event.target.value);//输出DOM属性中value的值,会随着input的改变而改变
  console.log(event.target.getAttribute("value"));//输出HTML属性中value的值,保持初始值不变
}

button的disabled属性

添加html属性disabled将会影响DOM属性，无论disabled是何值。而想动态使button可用或不可用，使用DOM属性的disabledkey可以实现

点我和点我和点我是一样的，都会造成按钮不可用

而使用DOM属性disabled：

//html
<button [disabled]="disabled" >点我</button>
//ts
disabled:boolean = true; //将使按钮不可用
disabled:boolean = false; //将使按钮可用

Angular使用DOM属性绑定，应优先使用DOM属性绑定
Angular学习笔记-数据绑定

双向数据绑定 [(ngModel)]

视图和模型的双向绑定。无论哪一个先发生改变，都会导致另一个也发生改变。一般用于表单处理

//html:
<input [(ngModel)]="name">
//ts:
name:string;

要想使用双向数据绑定，需要在app.module.ts中需导入import {FormsModule} from “@angular/forms”;
imports: [FormsModule],

相关推荐