[Angular] Create a simple *ngFor
In this post, we are going to create our own structure directive *ngFor.
What it should looks like in HTML?
<div>
<ul>
<li *myFor="let item of items; let i = index;">
{{ i }} Member: {{ item.name | json }}
</li>
<template myFor [myForOf]="items" let-item let-i="index">
<li>{{ i }} Member: {{ item.name | json }}</li>
</template>
</ul>
</div>
So here, we have a '*myFor' directive. It also use 'myForOf' direcitve. And a implicit value 'item'.
Notice that:
<li *myFor="let item of items; let i = index;">
{{ i }} Member: {{ item.name | json }}
</li>
and
<template myFor [myForOf]="items" let-item let-i="index">
<li>{{ i }} Member: {{ item.name | json }}</li>
</template>
They have the same effect.
Now let's create myFor directive:
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({
selector: '[myFor][myForOf]'
})
export class MyForDirective {
@Input()
set myForOf(collection) {
this.view.clear();
collection.forEach((item, index) => {
this.view.createEmbeddedView(
this.template,
{
$implicit: item,
index
}
)
});
} constructor(
private view: ViewContainerRef,
private template: TemplateRef<any>
) {
// this.template will point to the host element
}
}
It is good to clear the view every time we generate new embedded view:
this.view.clear();
Also we gave implicit 'value' and 'index'.
this.view.createEmbeddedView(
this.template,
{
$implicit: item, // let-item
index // let-i="index"
}
)
[Angular] Create a simple *ngFor的更多相关文章
- Create a simple REST web service with Python--转载
今日尝试用python建立一个restful服务. 原文地址:http://www.dreamsyssoft.com/python-scripting-tutorial/create-simple-r ...
- [Angular 2] Create a simple search Pipe
This lesson shows you how to create a component and pass its properties as it updates into a Pipe to ...
- [Angular] Using directive to create a simple Credit card validator
We will use 'HostListener' and 'HostBinding' to accomplish the task. The HTML: <label> Credit ...
- [Angular 2] A Simple Form in Angular 2
When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGr ...
- [Angular] Create a custom pipe
For example we want to create a pipe, to tranform byte to Mb. We using it in html like: <div> ...
- [Angular 2] More on *ngFor, @ContentChildren & QueryList<>
In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to dis ...
- [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 ...
- CHtmlEditCtrl(1) : Use CHtmlEditCtrl to Create a Simple HTML Editor
I needed a lightweight HTML editor to generate "rich text" emails, so I decided to explore ...
- [Angular] Create a custom validator for reactive forms in Angular
Also check: directive for form validation User input validation is a core part of creating proper HT ...
随机推荐
- sql 高性能存储过程分页
USE [Lyjjr] GO /****** Object: StoredProcedure [dbo].[P_ViewPage] Script Date: 05/29/2015 17:18:56 * ...
- 有趣的Ruby-学习笔记4
Ruby块 块.在我看来就是插入一段可变的函数 block_name{ statement1 statement2 .......... } 看起来不知道是什么,只是别急,继续往下看. 块函数通过yi ...
- eclipse- log 打印跟输出到文件
1.在eclipse中打印log,经常使用的就是log.e(string,string) 代码中如下 @Override public boolean onTouchEvent(MotionEvent ...
- 数据集 —— ground truth 数据集
1. matlab 自带含 ground truth 数据集 %% 加载停车标志数据到内存: data = load('stopSignsAndCars.mat', 'stopSignsAndCars ...
- Relaxation step(Dijkstra's 最短路径算法)
翻译成中文就是"松弛",属于工程优化的范畴: Dijkstra 的单源最短路径算法,有一个重要的步奏,当访问到新的结点 u (加入到集合 S),然后遍历 u 的邻接顶点(Adj), ...
- 1.JPA概要
转自:https://www.cnblogs.com/holbrook/archive/2012/12/30/2839842.html JPA定义了Java ORM及实体操作API的标准.本文摘录了J ...
- 自定义HTML标签属性
为HTML元素添加一自定义的属性非常方便,只须将其加到尖括号中即可,与内置属性地位相等. 如我们要为TextBox元素添加属性idvalue: <input type="text&qu ...
- Flask项目之手机端租房网站的实战开发(四)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- BP神经网络公式推导及实现(MNIST)
BP神经网络的基础介绍见:http://blog.csdn.net/fengbingchun/article/details/50274471,这里主要以公式推导为主. BP神经网络又称为误差反向传播 ...
- AndroidActivity跳转动画,让你的APP瞬间绚丽起来
我们都知道绚丽的APP总会给用户耳目一新的感觉,为了抓住用户更大网络公司使出浑身解数让自己的产品更绚丽,而绚丽最简单的效果就是Activity跳转效果,不仅能够让用户看起来舒服,并且实现起来也特别简单 ...