<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center"> <h1>
Welcome to {{ title }}
</h1> <h1>循环数据 显示数据的索引(key)</h1> <ul> <li *ngFor="let item of list;let key=index;">
{{key}}---{{item.title}}
</li>
</ul>
</div> <router-outlet></router-outlet>
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Angulardemo';
public list:any[]=[
{
"title":'我是数据1'
},
{
"title":'我是数据2'
},
{
"title":'我是数据3'
}
];
}

效果:

angular 中数据循环 *ngFor的更多相关文章

  1. angularcli 第三篇(数据循环*ngFor、条件判断*ngIf)

    1.数据循环 *ngFor (1)普通循环 <ul> <li *ngFor = "let item of list" > {{ item }} </l ...

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

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

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

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

  4. 对lua表中数据按一定格式处理,循环

    function putStartCard(handCard) function dataDeal(array,a,b,c) cclog("进入datadeal=============== ...

  5. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  6. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  7. Angular 中的数据交互(get jsonp post)

    一.Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 并注入 ...

  8. Angular中的数据绑定

    (1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...

  9. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

随机推荐

  1. asp.net 页面按回车就会触发button按钮事件

    转载于 https://www.cnblogs.com/anz130/articles/2445830.html 转自:http://space.itpub.net/12639172/viewspac ...

  2. 《Python编程:从入门到实践》第四章 操作列表 习题答案

    #4.1 pizzas = ['KFC','MDL','DKS'] ''' for pizza in pizzas: print(pizza); ''' for pizza in pizzas: pr ...

  3. NXP LPC系列学习笔记汇总(持续更新中)

    1. LPC11E68循环冗余校验CRC学习笔记 文章主要介绍了如何使用LPC11E68的CRC外设功能,并介绍了与CRC引擎相关的寄存器,然后以生成CRC-CCITT多项式校验为例进行了介绍. 2. ...

  4. Win10 hosts文件无法保存

    Win10无法修改编辑保存hosts文件怎么办?Win10系统默认是没有权限去编辑保存系统里的文件,这也是权限不够才导致修改编辑hosts后无法保存的原因,解决的办法就是把自己的帐户权限给提高就行了. ...

  5. 聊聊MVCC多版本并发控制

    一.介绍 MVCC只在RR和RC 2个隔离级别下才能工作.MySQL的大多数事务存储引擎实现的都不是简单的行级锁机制.基于提升并发性能的考虑,它们一般都同时实现了MVCC. 通俗的来讲,MVCC是行级 ...

  6. postgresql学习笔记--基础篇 -psql工具

    --创建用户 CREATE ROLE pguser WITH ENCRYPTED PASSWORD 'pguser'; --创建表空间目录 mkdir -p /database/pg10/pg_tbs ...

  7. 文件操作中file.seek()方法

    摘要: file.seek()可以将文件游标移动到文件的任意位置,本文具体的file.seek()文件游标移动操作方法. file.seek()方法标准格式是:seek(offset,whence=0 ...

  8. python实现字符串中如果遇到连续重复的字符只出现一次非去重

    需求:在一个字符串中, 如果遇到连续重复的字符只出现一个,(不是去重) 例:str1 = 'aabbccddaabbccdd' 输出结果为:‘abcdabcd’ 具体实现代码如下: def func( ...

  9. IDEA解决maven多module出现多root的问题

    背景 maven多module项目,maven窗口显示多个root 问题原因 打开父模块pom.xml文件,检查<modules/>标签,发现没有将子模块项目放到<modules/& ...

  10. 脚本put数据到hdfs

    1.vim putdata.sh 脚本功能: 每小时的第15分钟把上一小时的数据put到hdfs相应目录 为了避免大量的小文件,我们把文件夹下的文件cat到一个临时文件里,put成功后删除这个临时文件 ...