基础知识

1、ngFor,ngIf

<div *ngFor="let item of arr">{{item.name}}</div>
<div *ngIf="isShow">你好</div>

//.ts
export class HeaderComponent implements OnInit {
  public arr:object [] = [{name:'html',age:10},{name:"css",age:8}]
  public isShow:boolean = true;
  constructor() { }
  ngOnInit() {
  }
}

2、属性绑定[src]

<img [src]="imageUrl" alt="">

//.ts
export class HeaderComponent implements OnInit {
  public imageUrl:string = "http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg"
  constructor() { }
  ngOnInit() {
  }
}

3、事件

(click)

<p (click)="handleClick()">{{msg}}</p>

//.ts
export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  handleClick(){
    this.msg = "change"
  }
}

(keyup)—获取键盘码

<input type="text" (keyup)="handleEnter($event)" />

//.ts
export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  handleEnter(event:any){
    console.log(event.keyCode)
  }
}

(keyup.enter)—回车获取input输入框的值

<input #box (keyup.enter)="handleEnter(box.value)" />

//.ts
export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  handleEnter(value:string){
    console.log(value)
  }
}