angular学习笔记第一天

import {Component} from '@angular/core'

class Hero{
constructor(public id:number,public name:string){
}
}

@Component({
   selector:'app-root',
   template:`
  <h1>展示数据</h1>
  <h3>{{title}}</h3>
  <h4>My Favourite hero is :{{myHero}}</h4>
  <h3>使用ngFor显示数组属性</h3>
  <ul>
    <!-- ngFor可以为任何可迭代的对象渲染条目 -->
    <li *ngFor="let hero of heroes;let i = index">
    {{hero}}
    </li>
  </ul>
  <ul>
    <!-- nextHeroes类 -->
    <li *ngFor="let nextHero of nextHeroes">
    id:{{nextHero.id}} name:{{nextHero.name}}
    </li>
  </ul>
  <!-- ngIf -->
  <h3>ngIf</h3>
  <p *ngIf="nextHeroes.length>3">
    nextHeroes长度大于3
  </p>
       `
})
export class ShowdataComponent implements OnInit {
  title = "Tour of Hero"
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0]
  nextHeroes = [new Hero(1,'Windstorm'),new Hero(2,'Dombasto')]
  constructor() {
  }
  ngOnInit() {
  }
}

1.创建一个Hero类,使用了类的简写语法

• 创建了一个构造函数参数及其类型
• 声明了一个同名的公共属性
• 当创建安该类的实例时，把该属性初始化为相应的参数值
  2.通过Component装饰器制定元数据创建了一个组件
• template 内类模板
• templateUrl 外部模板
• selector css选择器 通过该选择器在index.html寻找合适的加载位置
  3.模板语法
• ngFor、ngIf、数据插值 {{ }}