[Angular 2] *ngFor
2023-09-14 08:59:19 时间
heros.ts:
import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; @Component({ selector:'heroes', styleUrls: [ 'heroes.component.css' ], template: ` <table> <thead> <th>Name</th> <th>Index</th> </thead> <tbody> <tr *ngFor="let hero of heroes; let i = index; trackBy: trackBy(hero); let isEven=even; let isFirst=first; let isLast=last;" [ngClass]="{'even': isEven, 'first': isFirst, 'last': isLast}"> <td>{{hero.name}}</td> <td>{{i}}</td> </tr> </tbody> </table> ` }) export class Heroes { heroes = HEROES; trackBy(hero){ return hero ? hero.id: undefined; } }
here we can also use:
trackBy: hero?.id
heroes.component.css:
.even{ background: lightgray; } .first{ font-weight: bold; } .last{ color: white; background: black; }
相关文章
- node、npm 、package.json、Angular Cli、webpack之间的关系(Windows环境下)
- Angular tsconfig.json 文件里的 paths 用途
- 【Angular教程】自定义管道
- 关于 Angular 开发时对主流浏览器支持的话题
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- 一款开源的 Angular Storefront 应用介绍,代号 Spartacus 诞生的历史背景
- Angular 项目多国语言设置
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- 关于 Angular 应用部署时的 base-href 参数
- 关于 Angular 12 的 inlineCriticalCss 选项
- Angular 4.0发布,致力于减小代码体积详解编程语言
- Angular和jQuery的区别
- Angular与React、Vue.js的对比
- Angular 6.0 即将发布 承诺更小更快更易用
- Angular 框架将进入 2.0 时代