Angulary 模版 指令 事件

模版

插值表达式

{{ var }}

属性绑定，通过中括号标识属性名，等号赋值实际变量

<img [src]="itemImageUrl2">

指令

*ngIf

当条件为真时候，内容显示

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label for="hero-name">Hero name: </label>
    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
  </div>
</div>

*ngFor

*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素

<li *ngFor="let hero of heroes">
	{{ hero.id }}
</li>

不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分

事件

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

当li标签触发点击事件时，将会调用onSelect方法

onSelect(hero: Hero): void {
  this.selectedHero = hero;
}