[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.
[Angular 2] More on *ngFor, @ContentChildren & QueryList<>的更多相关文章
- [Angular] Create a simple *ngFor
In this post, we are going to create our own structure directive *ngFor. What it should looks like i ...
- angular 中数据循环 *ngFor
<!--The content below is only a placeholder and can be replaced.--> <div style="text-a ...
- [Angular 2] ng-model and ng-for with Select and Option elements
You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms ...
- [Angular] @ViewChildren and QueryLists (ngAfterViewInit)
When you use @ViewChildren, the value can only be accessable inside ngAfterViewInit lifecycle. This ...
- Angular 星级评分组件
一.需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需 ...
- ng-bootstrap 组件集中 tabset 组件的实现分析
ng-bootstrap: tabset 本文介绍了 ng-bootstrap 项目中,tabset 的实现分析. 使用方式 <ngb-tabset> 作为容器元素,其中的每个页签以一个 ...
- ng-template、ng-content、ng-container
https://www.jianshu.com/p/0f5332f2bbf8 ng-template.ng-content.ng-container三者应该是自定义组件需要经常用到的指令.今天咱们就来 ...
- Angular6 学习笔记——内容投影, ViewChild和ContentChild
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular5 父组件获取子组件实例( ViewChildren、ViewChild用法)
原文链接 Understanding ViewChildren, ContentChildren, and QueryList in Angular 使用场景 有时候,我们想要在父组件中访问它的子组件 ...
随机推荐
- HDU 5389 Zero Escape
题意:有一些人,每人拿一个号码,有两个门,门的值分别为A和B,要求把人分成两堆(可以为空)一堆人手持号码之和的数字根若等于A或者B就可以进入A门或者B门,要求两堆人分别进入不同的门,求有几种分配方式, ...
- MyBatis批量删除 多态sql,构建in语句
<!--==========================删除==================================== --> <delete id=&quo ...
- Druid连接池简单入门
偶尔的机会解释Druid连接池,后起之秀,但是评价不错,另外由于是阿里淘宝使用过的所以还是蛮看好的. 1.jar包依赖--Druid依赖代码 <dependency> <groupI ...
- BaseAdapter中重写getview的心得以及发现convertView回收的机制
以前一直在用BaseAdapter,对于其中的getview方法的重写一直不太清楚.今天终于得以有空来探究它的详细机制. 下面先讲讲我遇到的几个问题: 一.View getview(int posit ...
- DzzOffice管理员登陆方法和管理员应用介绍
DzzOffice的管理方式类似于windows的管理方式,是直接在桌面中,通过管理员应用进行系统中的所有管理里工作. 1.访问http://www.domain.com (你站点的访问地址) 2.点 ...
- C#几种截取字符串的方法小结
1.根据单个分隔字符用split截取例如代码如下: string st="GT123_1"; string[] sArray=st.split("_"); 即可 ...
- 多线程下OpenCV操作的问题
问题:在OpenCV中,使用cvCaptureFromAVI打开一个视频文件后,并使用cvReleaseCapture释放关闭它后.再开启一个线程使用cvCaptureFromAVI打开一个视频文件, ...
- 关于“心脏出血”漏洞(heartbleed)的理解
前阵子“心脏出血”刚发生的时候读了下源代码,给出了自己觉得比较清楚的理解. -------------------------穿越时空的分割线--------------------------- ...
- 最短路径算法(Dijkstra算法、Floyd-Warshall算法)
最短路径算法具体的形式包括: 确定起点的最短路径问题:即已知起始结点,求最短路径的问题.适合使用Dijkstra算法. 确定终点的最短路径问题:即已知终结结点,求最短路径的问题.在无向图中,该问题与确 ...
- Java中Runnable和Thread的区别(转)
http://developer.51cto.com/art/201203/321042.htm 第一种方式:使用Runnable接口创建线程 第二种方式:直接继承Thread类创建对象 使用Runn ...