angular2 在组件模板中可以循环数组集合等对象,语法非常简单,如:

 <ng-container *ngFor="let item of model.list">
<div class="sermons-post">
{{item.name}}
</div>
</ng-container>

但是,很多情况下我们需要的是另一种循环方式,常见的根据计数条件来循环指定的次数,如js的:for(var n=0;n<10;n++ )

然而高大上的angular2确并不支持这种比较基础的语法(抱歉我没谷歌到,如果有,请告诉我),如果想实现这种方式的模板指令循环,可以采取一种迂回的方式,将指定循环的数字

转换成对应大小的数组,做法如下:

在模板中将数字转换成对应大小的数组

  <ng-container *ngFor="let i of  arr(model.pages).fill(1);let n=index">
<li>
<a [routerLink]="['/list',1,{page:n+1}]" >{{n+1}}</a>
</li>
</ng-container>

组件中需要定义arr对象,它是Array数组对象的别名,

export class ListContentsecComponent implements OnInit {
arr = Array;
//省略...
}

angular2 ngfor循环的更多相关文章

  1. Angular2 *ngFor把数据显示在多个input中出错解决方法

    点击添加按钮会自动添加一个空的input组 html <div class="form-inline"> <label class="form-cont ...

  2. ngFor 循环带索引

    *ngFor="let item of userList,let i = index"   或者 *ngFor="let item of userList index a ...

  3. 五、Angular定义字段、绑定字段、获取数据、对象获取数据、*ngFor循环获取数据,自定义方法、*ngIf条件判断、双向数据绑定

    1.定义属性 2.绑定属性.绑定html中 3.循环获取数据 编写的时候没有注意,第二个循环 i 需要改成 {{i}} ,这样才会显示 出效果 4.自定义方法 变量名截图省略 5.*ngIf条件判断 ...

  4. 理解 angular2 基础概念和结构 ----angular2系列(二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

  5. angular2.0学习笔记4.npm常用指令记录及angular语法

    以下命令,都需要在命令行窗口中,先切入到项目文件夹目录,再执行 1.npm start 这个命令会在“监听”模式下运行TypeScript编译器,当代码变化时,它会自动重新编译. 同时,该命令还会在浏 ...

  6. 浅谈Angularjs至Angular2后内置指令的变化

    一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...

  7. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  8. angular2自学笔记(三)---ng2选项卡

    学习了这些概念就能简单的描述一个选项功能的选项卡按钮: 数据:1.数组:实例化一个数组的类,如果想要使用这个类中的数据,需要在组件中 使用一个公共属性来暴漏这个类如 heroes=HEROES;con ...

  9. 《Angular4从入门到实战》学习笔记

    <Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...

随机推荐

  1. Python05(运算符)

    Trainning-day04回顾1.Python运算符 + - * / % ** //2.标准输入函数 input() input("输入提示语")3.占位符 生成一定格式的字符 ...

  2. makefile笔记8 - make的运行

    一般来说,最简单的就是直接在命令行下输入 make 命令, make 命令会找当前目录的makefile 来执行,一切都是自动的.但也有时你也许只想让 make 重编译某些文件,而不是整个工程,而又有 ...

  3. 关于while read line 循环中变量作用域的问题

    前一阵用shell写了一个从数据库中抽取数据生成.xml文件的脚本,要求是每个文件中只生成1000条数据.于是用到了while read line 作为循环. 在制作文件计数器的时候发现了一个问题,在 ...

  4. Javascript学习二---DOM元素操作

    Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...

  5. 【原创】ACR傻瓜式破解IC芯片卡

    1.简介: 智能卡(英语:Smart card 或IC Card),又称智慧卡.聪明卡.集成电路卡及IC卡,是指粘贴或嵌有集成电路芯片的一种便携式卡片塑料.卡片包含了微处理器.I/O接口及存储器,提供 ...

  6. vue+koa实现简单的图书小程序(2)

    记录一下实现我们图书的扫码功能: https://developers.weixin.qq.com/miniprogram/dev/api/scancode.html要多读文档 scanBook () ...

  7. ifeve.com 南方《JVM 性能调优实战之:使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码》

    https://blog.csdn.net/defonds/article/details/52598018 多次拉取 JStack,发现很多线程处于这个状态:    at jrockit/vm/Al ...

  8. crunch--字典生成工具

    Crunch是一种创建密码字典工具,按照指定的规则生成密码字典,可以灵活的制定自己的字典文件.使用Crunch工具生成的密码可以输出到屏幕,保存到文件.或另一个程序.crunch程序在2004年及以前 ...

  9. Go获取美元实时汇率

    package main import ( "encoding/json" "fmt" "io/ioutil" "net/http ...

  10. Vue基础之数据绑定

    我们学习一门新语言或者框架时,第一件事是什么呢,那必然是向世界say Hello. 创建一个Vue应用 话不多说,先上代码,让我们感受一下Vue的核心功能 <!DOCTYPE html> ...