四、angular6-ngFor、ngIf、事件、双向绑定

1，ngFor

在my-first-componnet.component.ts中添加如下代码

 heros : Array<{name: string, strength: number, agile:number, intelligence: number}> = [
    {name:'猎魂人', strength : 120, agile : 66, intelligence: 55},
    {name:'光法', strength : 60, agile : 58, intelligence : 130},
    {name:'赏金', strength : 65, agile : 135, intelligence : 75},
  ]

在my-first-componnet.component.html中添加 

<!--
  index 索引  first是否第一个 last是否最后一个 odd是否奇数 even是否偶数 循环时可以去掉，用到的话就加上
--> 
 <div class="row" *ngFor="let hero of heros;index as index; first as first; last as last; odd as odd; even as even;">
    <span class="my-label">英雄：</span><span>{{hero.name}}</span>
    <span class="my-label">力量：</span><span>{{hero.strength}}</span>
    <span class="my-label">敏捷：</span><span>{{hero.agile}}</span>
    <span class="my-label">智力：</span><span>{{hero.intelligence}}</span>
    
    </div>

2、ngIf

 在my-first-componnet.component.ts中添加如下代码

在my-first-componnet.component.html中添加

<div *ngIf="showGameName">Dota</div>

3、双向绑定

在app.module.ts中引入FormsModule

在my-first-componnet.component.html中添加 [(ngModel)]="hero.speed"

4.事件

如上图，添加

<div class="input-group-append">
   <button class="btn btn-primary" type="button" (click)="onClick()">点击</button>
 </div>

  在my-first-componnet.component.ts中添加如下代码

 gameName:string = "Dota";
  onClick(): void{
    alert("游戏名称为：" + this.gameName);
  }

 最终效果为