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 ...
随机推荐
- Windows Server 2008上网设置——IE
IE安装设置 在 Windows Sever 2008 中打开 IE 浏览器时,IE 会出现[已启用 Internet Explorer 增强的安全配置]的提示信息. Windows Server 2 ...
- Python 包文件安装
https://pypi.tuna.tsinghua.edu.cn/simple/ 清华源 https://pypi.doubanio.com/simple/ 豆瓣源 pip install -i h ...
- linux网络编程之socket编程(十)
今天继续socket编程的学习,最近晚上睡觉都没有发热,没有暖气的日子还是种煎熬,快乐的十一也已经走来,幸福有暖气的日子也快啦,好了,回到正题~ ①close终止了数据传送的两个方向. ②shutdo ...
- P3197 [HNOI2008]越狱[组合数学]
题目来源:洛谷 题目描述 监狱有连续编号为 1…N 的 N 个房间,每个房间关押一个犯人,有 M 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生 ...
- 【转载】浅谈HTTPS以及Fiddler抓取HTTPS协议
最近想尝试基于Fiddler的录制功能做一些接口的获取和处理工作,碰到的一个问题就是简单连接Fiddler只能抓取HTTP协议,关键的登录请求等HTTPS协议都没有捕捉到,所以想让Fiddler能够同 ...
- 24 结合webpack使用vue-router
启用路由 参考官网:https://router.vuejs.org/zh/installation.html webpack就是一个模块化的工具 安装 cnpm i vue-router -S
- 能ping通Linux但是ssh连不上问题解决方法
问题:能ping通Linux服务器 但是ssh连不上 <Linux redhat AS4 版本> 解决方法这个问题花了我20分钟去查资料,网上写的解决方法也是五花八门,不过,总算解决了, ...
- shell 学习笔记2
shell的常用处理:https://github.com/dylanaraps/pure-bash-bible -d作为分隔符:read xargs -t作为分隔符:sort -F作为分隔符:awk ...
- Tomcat报错:Java.long.nullpointerException,详细是resp.getwriter.write报错
报错原因: 空指针 在out.write(name);时,name不能为null,哪怕你随便给name赋值为xxoo啥的都可以,不要为null 改正:String name = "fail& ...
- 织梦cms导航高亮显示栏目及首页的方法
直奔主题了,高亮显示教程适用于您具有一定的CSS基础才可以了,前提把高亮显示的样式写好,然后再开始高亮显示标签适用. <li {dede:field name=typeid runphp=&qu ...