四、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);
  }

 最终效果为

 

发布了83 篇原创文章 · 获赞 9 · 访问量 12万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览