Angular02 将数据添加到组件中

准备:已经搭建好angular-cli环境、知道如何创建组件

一、将一个数据添加到组件中

1 创建一个新的组件 user-item

  Angular02 将数据添加到组件中

2 将组件添加到静态模板中

  Angular02 将数据添加到组件中

3 为组件添加属性,并利用构造器赋值

  Angular02 将数据添加到组件中

4 修改组件的模板

  在模板中显示属性的值

  格式

    {{属性名}}

  Angular02 将数据添加到组件中

5 打开HTTP服务,刷新浏览器

  Angular02 将数据添加到组件中

二、将多个数据同时添加到组件中,而且只用一个属性变量

1 创建一个 app-user-list 组件

  Angular02 将数据添加到组件中

2 将组件添加到静态模板中

  Angular02 将数据添加到组件中

3 为组件添加属性,并在构造器中进行赋值

  Angular02 将数据添加到组件中

  注意:属性类型是数组类型,将多个数据放到一个数组数组中,在赋值给属性变量

4 修改组件的模板

  Angular02 将数据添加到组件中

  注意:<li *ngFor="let name of names">Hello {{name}}</li> 中的*ngFor="let name of names"代表一个属性,  *ngFor 表示要在该属性上使用NgFor指令,NgFor指令类似于一个for循环,其目的是为集合中的每一个条目都新建一个DOM元素;所以,<li *ngFor="let name of names">Hello {{name}}</li>的意思就是为names变量中的每一个元素都新建一个li元素;let name of names表示将names变量中的每一元素循环赋值给name

    Angular02 将数据添加到组件中

5 打开HTTP服务,刷新浏览器

  Angular02 将数据添加到组件中

上一篇:VMware下设置Centos7联网与固定IP连接Xshell


下一篇:.net mvc 超过了最大请求长度 限制文件上传大小