显示数据

显示数据

在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。

使用插值表达式显示组件属性

Angular 自动从组件中提取属性的值,并且把这些值插入浏览器中。当这些属性发生变化时,Angular 就会自动刷新显示。严格来说,“重新显示”是在某些与视图有关的异步事件之后发生的,例如,按键、定时器完成或对 HTTP 请求的响应。
注意,我们没有调用 new 来创建AppComponent类的实例,是 Angular 替我们创建了它。那么它是如何创建的呢?

  1. 注意@Component装饰器中指定的 CSS 选择器selector,它指定了一个叫my-app的元素。 该元素是index.html的body里的占位符。
  2. 当我们通过main.ts中的AppComponent类启动时,Angular 在index.html中查找一个<my-app>元素, 然后实例化一个AppComponent,并将其渲染到<my-app>标签中。

用构造函数的参数直接定义属性:
public id: number,
这个简写语法做了很多:

  1. 声明了一个构造函数参数及其类型
  2. 声明了一个同名的公共属性
  3. 当我们new出该类的一个实例时,把该属性初始化为相应的参数值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版本:Angular 5.0.0-alpha 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中...
    soojade阅读 644评论 0 1
  • 总的来说就是利用插值表达式和其它形式的属性绑定机制,把数据显示到 UI 上 a.插值表达式 要显示组件的属性,最简...
    赵然228阅读 1,621评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,242评论 6 13
  • 0091 白茶介绍(一) 摘要:为小学的孩子准备的白茶介绍材料,一共两篇。第一篇介绍白茶为什么叫白茶,以及白茶三个...
    白茶笔记阅读 1,013评论 1 2
  • 1 别人没有义务去帮你消化那些负能量 半夜收到一个姑娘的邮件,跟我说自己的男友不懂她。 她说她明明知道是自己太任性...
    1b0ccfd39571阅读 469评论 0 1