Angular list列表的事件响应实现

83 阅读1分钟

语法:

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

(click)告诉Angular,监听li元素的点击事件。当用户点击li时,Angular执行onSelect(hero).

新建一个property selectedHero, 用于存储选中的hero:

测试效果:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":