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 ...
随机推荐
- CentOS 7的Linux系统优化加固
1.关闭selinux 2.关闭防火墙 3.关闭NetworkManager 4.为系统运维管理员创建普通用户,并配置sudo(vi sudo) 5.清空泄漏系统版本信息的文件 6.基础优化sshd ...
- Ubuntu armhf 版本国内源
Ubuntu armhf 版本国内源: deb http://mirrors.ustc.edu.cn/ubuntu-ports/ xenial main multiverse restricted u ...
- Mybatis.NET Oracle 线上神奇问题:Value does not fall within the expected range.
1.错误现象 在向数据库查询一条数据的时候报如下错误: Value does not fall within the expected range. at Oracle.ManagedDataAcce ...
- 2019-ACM-ICPC-南昌区网络赛-H. The Nth Item-特征根法求通项公式+二次剩余+欧拉降幂
2019-ACM-ICPC-南昌区网络赛-H. The Nth Item-特征根法求通项公式+二次剩余+欧拉降幂 [Problem Description] 已知\(f(n)=3\cdot f(n ...
- Luogu P1114 “非常男女”计划/Luogu P2697 宝石串
Luogu P1114 "非常男女"计划/Luogu P2697 宝石串 (感觉我最近很爱做双倍经验的题啊) 使$d$等于第$i$个位置男生数(绿宝石数)减女生数(红宝石数)的差值 ...
- PYTHON 爬虫 baidu美女图片
from urllib import requestimport re import osdef main(): #page=request.urlopen("http://image.ba ...
- java线程基础巩固---多Product多Consumer之间的通讯导致出现程序假死的原因分析
在上一次中已经实现一个生产者与消费者的初步模型(http://www.cnblogs.com/webor2006/p/8413286.html),但是当时只是一个生产者对应一个消费者,先贴下代码: p ...
- re模块及其用法
一.re模块下的常用方法 首先在使用re模块之前,需要引入re模块 import re 1.与查找相关的: 1.findall 返回列表,找到所有的匹配项 ret = re.findall(" ...
- Jmeter - 生成Html报告
同步更新至个人博客:https://njlife.top/2019/07/12/Jmeter-%E7%94%9F%E6%88%90Html%E6%8A%A5%E5%91%8A/ Jmeter GUI提 ...
- 神奇搜索算法A*
A* A*是一种启发式搜索算法,又叫最佳图搜索算法. 何谓启发式搜索? 众所周知,计算机在执行搜索算法时是没开上帝视角的.因此,在搜索时,往往显得盲目,把所有可能的状态全部遍历,这种搜索我们统称盲目搜 ...