Angular 单向数据绑定{{}}与[]

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xnh_565175944/article/details/81947915

单向数据绑定

首先认识一下数据绑定:

       Angular中的数据绑定指的是同一组件中的控制器文件(.ts)与模板文件(.html)之间的数据传递。

再认识一下单向数据绑定:

       控制器文件向模板文件传递    或者模板文件向控制器文件赋值

单项数据绑定有两种:

 1.控制器文件->模板文件

模板文件代码:

<div>

       <img src=”../assets/p1.png”>

       <img [src]=”imgUrl”>

       <img src=”{{imgUrl}}”>

</div>

控制器文件代码:

imgUrl=’../assets/p1.png’;

结果:三张一摸一样的照片

 

这种方法是将ts文件中变量imgUrl的值传递到html文件中的imgUrl中

 

2. 模板文件->控制器文件

模板文件代码:

<input (keyup)=”keyPress($event)”>

控制器文件代码:

title=””;

keyPress(e){

       title=e.keyCode;

       console.log(e.keyCode);

}

结果:在控制台中可以看到打印的输入的值

 

这种方法是将html文件中的输入的值在ts文件中接收