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

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>