angular 中数据循环 *ngFor
<!--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的更多相关文章
- angularcli 第三篇(数据循环*ngFor、条件判断*ngIf)
1.数据循环 *ngFor (1)普通循环 <ul> <li *ngFor = "let item of list" > {{ item }} </l ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- 五、Angular定义字段、绑定字段、获取数据、对象获取数据、*ngFor循环获取数据,自定义方法、*ngIf条件判断、双向数据绑定
1.定义属性 2.绑定属性.绑定html中 3.循环获取数据 编写的时候没有注意,第二个循环 i 需要改成 {{i}} ,这样才会显示 出效果 4.自定义方法 变量名截图省略 5.*ngIf条件判断 ...
- 对lua表中数据按一定格式处理,循环
function putStartCard(handCard) function dataDeal(array,a,b,c) cclog("进入datadeal=============== ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- Angular 中的数据交互(get jsonp post)
一.Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 并注入 ...
- Angular中的数据绑定
(1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
随机推荐
- asp.net 页面按回车就会触发button按钮事件
转载于 https://www.cnblogs.com/anz130/articles/2445830.html 转自:http://space.itpub.net/12639172/viewspac ...
- 《Python编程:从入门到实践》第四章 操作列表 习题答案
#4.1 pizzas = ['KFC','MDL','DKS'] ''' for pizza in pizzas: print(pizza); ''' for pizza in pizzas: pr ...
- NXP LPC系列学习笔记汇总(持续更新中)
1. LPC11E68循环冗余校验CRC学习笔记 文章主要介绍了如何使用LPC11E68的CRC外设功能,并介绍了与CRC引擎相关的寄存器,然后以生成CRC-CCITT多项式校验为例进行了介绍. 2. ...
- Win10 hosts文件无法保存
Win10无法修改编辑保存hosts文件怎么办?Win10系统默认是没有权限去编辑保存系统里的文件,这也是权限不够才导致修改编辑hosts后无法保存的原因,解决的办法就是把自己的帐户权限给提高就行了. ...
- 聊聊MVCC多版本并发控制
一.介绍 MVCC只在RR和RC 2个隔离级别下才能工作.MySQL的大多数事务存储引擎实现的都不是简单的行级锁机制.基于提升并发性能的考虑,它们一般都同时实现了MVCC. 通俗的来讲,MVCC是行级 ...
- postgresql学习笔记--基础篇 -psql工具
--创建用户 CREATE ROLE pguser WITH ENCRYPTED PASSWORD 'pguser'; --创建表空间目录 mkdir -p /database/pg10/pg_tbs ...
- 文件操作中file.seek()方法
摘要: file.seek()可以将文件游标移动到文件的任意位置,本文具体的file.seek()文件游标移动操作方法. file.seek()方法标准格式是:seek(offset,whence=0 ...
- python实现字符串中如果遇到连续重复的字符只出现一次非去重
需求:在一个字符串中, 如果遇到连续重复的字符只出现一个,(不是去重) 例:str1 = 'aabbccddaabbccdd' 输出结果为:‘abcdabcd’ 具体实现代码如下: def func( ...
- IDEA解决maven多module出现多root的问题
背景 maven多module项目,maven窗口显示多个root 问题原因 打开父模块pom.xml文件,检查<modules/>标签,发现没有将子模块项目放到<modules/& ...
- 脚本put数据到hdfs
1.vim putdata.sh 脚本功能: 每小时的第15分钟把上一小时的数据put到hdfs相应目录 为了避免大量的小文件,我们把文件夹下的文件cat到一个临时文件里,put成功后删除这个临时文件 ...