首页 > 其他 > 详细

angular 学习笔记之创建组件,定义属性,数据循环

时间:2019-06-26 15:14:30      阅读:141      评论:0      收藏:0      [点我收藏+]

1.创建组件(命令)

ng g component my-new-component
指定目录创建 :ng g component components/Footer

 2.组件的引用(.html文件中引用)

<app-header></app-header>

 3.数据绑定(属性绑定)

在ts文件中定义属性 下面介绍几种定义属性的方式

title ="这是一个属性";
msg ="";
赋值: this.msg ="只是另一个属性"

绑定属性(html文件中):

{{title}}
<div [title]="msg">鼠标放上去可以看到msg的值</div>

 定义属性加修饰符 public

public username ="user";

 定义属性的类型:(下面是string类型的属性)

pubic string calssname ="三年二班";

 定义属性:  (ts文件中定义  construstor他说是个构造函数哈 在这个里面给h赋值  在这个构造函数外面定义h这个属性)

this.h="<h2>这是一个h2用[innerHTML]来解析</h2>";

获取:

<div [innerHTML]="h"></div>(html文件中解析)

 定义对象属性:

public obj ={

name="张三";

  }

获取:

{{obj.name]}

 3.数据循环

定义一个list

public list =[];
给list赋值:
this.list["11","22","33"];

循环list:

<ul> 
  <li *ngFor="let item of list"> 
    {{item}} 
  </li> 
</ul>

 

 循环时获取索引:

<ul> 
  <li *ngFor="let item of list;let i = index;">
    {{item}} --{{i}}
  </li>
</ul>

 

angular 学习笔记之创建组件,定义属性,数据循环

原文:https://www.cnblogs.com/zhaoqiusheng/p/11089611.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!