angular：数据、属性、事件的绑定与使用

项目准备

用ng n npPro2 --standalone=false命令创建一个angular项目。

再使用ng g c my01命令创建一个组件。

现在项目的文件布局：

在根组件app.component.html中引用刚创建的组件：

简单数据类型展现

左侧窗口是组件的ts文件，右侧窗口是组件的html文件：

展示：

数组数据展现

展示效果：

对象类型数据展示

展示效果：

{{}}支持数学运算符

展示结果：

{{}}支持比较运算符

展示结果：

{{}}支持三元运算符

展示结果：

{{}}支持逻辑运算符

展示结果：

{{}}支持使用对象方法、类中的方法

展示结果：

点击事件

展示结果：

点击按钮：

属性的绑定

把鼠标放上去，给出提示：

特殊的属性：用于显示html

展示结果：

双向数据绑定

ng默认不加载双向数据绑定功能，必须人为手动开启此功能,才能进行数据绑定。
在全局配置文件中开启双向数据绑定功能，全局配置文件是app.module.ts。

展示结果：

修改输入框的内容，输入框下方的内容也会随着改变（如果没有生效，就重启下服务器）：

样式属性：class与style的使用

ngStyle的写法

展示结果：

每点击一次按钮，字体就增大1：

ngClass的写法

当danger是true的时候，样式生效：

当danger是false的时候，样式不生效：

开始展示效果：

点击按钮增大文字，超过有一定值的时候，按钮的样式就改变了：