[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.
相关文章
- Java Web Servlet (Part C)- HttpServletRequest & HttpServletResponse
- 【tensorflow】MTCNN网络基本函数bbox_ohem&landmark_ohem()
- 使用ModSecurity & ELK实现持续安全监控
- 内功修炼之lodash—— clone&cloneDeep(一定有你遗漏的js基础知识)
- ChatGPT +RPA=?——对话ALBERT蓝振忠&实在智能孙林君
- Java中运算符 "|" 和 "||" 以及 "&" 和 "&&" 区别
- ognl表达式编写-Struts2框架(二):封装方法&其他介绍&注入方式详解
- Villain - Windows&Linux后门生成器
- C/C++开发基础——函数指针&回调函数
- 7 Papers & Radios | 爆火论文打造《西部世界》雏形;OpenAI终结扩散模型
- mysql创建外键报错的原因及解决(can't not create table)
- AMP MySQL升级提升数据库性能的必要之举(amp mysql升级)
- 如何增加Oracle数据库的AMP值(amp值oracle)
- 社区(php&&mysql)三