Three 判断 循环 事件 当前项

周大胖子

循环

1. <ul> <li *ngFor="let items in arr;let i = index"> {{items}}____{{i}}  </li></ul>

复制代码

判断  比方判断条件 const  kg = true ;

1. <div *ngIf="kg">

复制代码

事件绑定

1. <li (click)="onSelect(参数)"></li>    // 这个参数怎么传 从哪传要多方验证

复制代码

当前项的CLASS样式

1. <li [class.selected]=" hero === selectedHero"> 这里是循环出来的值 这需要和上面循环一起看</li>

复制代码

最终的代码  都加一块 长这样：

1.   <ul class="heroes">
2.            <li *ngFor="let hero of heroes;let i = index;"
3.                 (click)="onSelect(hero)"
4.                 [class.selected]="hero === selectedhero" >
5.                <span class="badge">{{hero.id}}</span>
6.                           {{hero.name}}__{{i}}
7.           </li>
8.   </ul>

复制代码

周大胖子

该当前的解释：如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它。

周大胖子

注意 * 号 这个很不能丢