[Angular 2] More on *ngFor, @ContentChildren & QueryList<>
In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to display all the heros is we hard cord all heros in our heroes component. First, in real world app, we cannot hard cord; Seond, even we don't hard code, do http instead, it is still not good enough. We should leave Heroes component as dump component, just rendering the ui, no logic should be involved.
So instead of doing this in app.ts:
@Component({ selector: 'app', template: ` <heroes> </heroes> ` })
We try another way like this:
@Component({ selector: 'app', template: ` <heroes> <hero name="Superman" id="1"></hero> <hero name="Batman" id="2"></hero> <hero name="BatGirl" id="3"></hero> <hero name="Robin" id="4"></hero> <hero name="Flash" id="5"></hero> <hero name="Zhentian" id="6"></hero> </heroes> ` })
Well, I know, still hard code, but just show how ngFor can be used.
Now, inside 'heroes' tag, we add now 'hero' tag. And we want to display those inside 'heroes' component:
import {Component, ContentChildren, QueryList} from "@angular/core"; import {Hero} from './hero'; /* 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; @ContentChildren(Hero) heroes: QueryList<Hero> trackBy(hero){ return hero ? hero.id: undefined; } }
You can see, we have commented out the hard code array. Instead, we use:
@ContentChildren(Hero)
heroes: QueryList<Hero>
'Hero' here, is a element directive:
import {Directive, Input} from "@angular/core"; @Directive({ selector: 'hero', }) export class Hero { @Input() id: number; @Input() name:string; }
@ContentChildren will check the Children in HTML DOM tree, which will get:
<hero name="Superman" id="1"></hero> <hero name="Batman" id="2"></hero> <hero name="BatGirl" id="3"></hero> <hero name="Robin" id="4"></hero> <hero name="Flash" id="5"></hero> <hero name="Zhentian" id="6"></hero>
QueryList<Hero>: Only get 'Hero' directive.
QueryList is a class provided by Angular and when we use QueryList with a ContentChildren Angular populate this with the components that match the query and then keeps the items up to date if the state of the application changes .
However, QueryList requires a ContentChildren to populate it, so let’s take a look at that now.
What's cool about *ngFor, it not only accpets Array, but also any iterable type, we have list of DOM element 'hero', which are iterable, so ngFor will able to display those also.
相关文章
- 7 Papers & Radios | 无人机3D打印登Nature封面;哈工大用微波驱控机器人
- 【补贴策略】用户质量&用户价值&用户成本的ROI提升
- 零零信安-D&D数据泄露报警日报【第32期】
- Rebalance&多线程实例消费(十二)
- Web Spider NEX XX国际货币经纪 - PDF下载 & 提取关键词(二)
- 语音技术&多模态技术 | 犀牛鸟精英人才计划课题宣讲会第四场
- 7 Papers & Radios | 李旻辰获SIGGRAPH 2021最佳博士论文奖;韩国研发仿变色龙软体机器人
- webapi(一)初识DOM&定时器
- WordPress 批量替换插件 Search & Replace 和中文包
- 整理得吐血了,二叉树、红黑树、B&B+树超齐全,快速搞定数据结构
- 详解nohup /dev/null 2>&1 含义的使用
- AT&T 拥抱开源,软件开源程度或将达到50%
- AMP MySQL升级提升数据库性能的必要之举(amp mysql升级)
- AMP与Oracle结合提升数据库性能($amp oracle)
- 将DataTable转换成List<T>实现思路及示例代码