[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 使用场景 有时候,我们想要在父组件中访问它的子组件 ...
随机推荐
- POJ 2481 Cows
Cows Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 16546 Accepted: 5531 Description ...
- delphi ole word
源代码如下: //Word打印(声明部分) wDoc,wApp:Variant; function PrnWordBegin(tempDoc,docName:String):boolean; func ...
- CSS快速制作图片轮播的焦点
来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...
- Windows Server 2003下ASP.NET无法识别IE11的解决方法【转】
http://www.iefans.net/windows-server-2003-asp-net-ie11-shibie/ 由于IE11对User-Agent字符串进行了比较大的改动,所以导致很多通 ...
- django form关于clean及cleaned_data的说明 以及4种初始化
1.form类的运行顺序是init,clean,validte,save其中clean和validate会在form.is_valid()方法中被先后调用.(这里留有一个疑问,结构完全相同的两个f ...
- MATLAB / Simulink on BeagleBone Black
转自:beagleboard@googlegroups.com邮件组 作者:kevind I have MATLAB / Simulink working with BeagleBone Black. ...
- Codeforces 364
A 第一题明显统计,注意0和long long(我WA,RE好几次) /* * Problem: A. Matrix * Author: Shun Yao */ #include <string ...
- matlab中的字符串数组与函数调用
1, matlab中的字符串就是1维字符数组,即如: a = 'dddssd'; b = 'lsde'; c = [a, b]; 当然也可以: c= strcat(a, b); 2, matlab中的 ...
- Spark RDD概念学习系列之细谈RDD的弹性(十六)
细谈RDD的弹性 所谓,弹性,是指在内存不够时可以与磁盘进行交换. 弹性之一:自动的进行内存和磁盘数据存储的切换 弹性之二:基于Lineage(血缘)的高效容错 弹性之三:Task如果失败会 ...
- Hibernate之QBC查询与本地SQL查询
1. QBC查询: QBC 查询就是通过使用Hibernate提供的QueryByCriteria API 来查询对象,这种API封装了SQL语句的动态拼装,对查询提供了更加面向对象的功能接口 ...