当前位置: 首页 > news >正文

Angular-数组循环

简单数组

.ts-定义一个数组

// 第一种定义方式
public arr1:string[] = ['aa','bb','cc'];  // 完整版
arr2:string[] = ['aa','bb','cc'];         // 省略版
public objects:any[] = [{username:'Echoo',age:18},{username:'Amily',age:39},{username:'Mike',age:34}];  // 元素是对象
//第二种定义方式
public items:Array<any> = ['aa',11,'cc'];

两种定义方式效果是一样的,推荐使用第一种定义方式(修饰符 数组名:元素类型[] = [])
但无论使用哪种方式,都建议指明修饰符和元素类型,规范书写;

.html-普通循环(*ngFor

<!-- 元素是基本数据类型-->
<ol><li *ngFor="let item of items">{{item}}</li>
</ol><!-- 元素是对象-->
<ul><li *ngFor="let item of objects">{{item.username}}----{{item.age}}</li>
</ul>

*ngFor是Angular中定义好的标签属性,用于循环输出;
let item of xxx是固定写法,表示遍历xxx中的每一个元素,xxx是具体的数组名,比如定义的数组名为items,则完整的句子就是let item of items

二维数组

.ts-定义一个数组

public cars:any[] = [{brand:'宝马',list:[{title:'宝马x1',price:'300000'},{title:'宝马x2',price:'400000'},{title:'宝马x3',price:'500000'}]},{brand:'奥迪',list:[{title:'奥迪q1',price:'600000'},{title:'奥迪q2',price:'700000'},{title:'奥迪q3',price:'800000'}]},
];
http://www.lryc.cn/news/362321.html

相关文章:

  • 初级网络工程师之入门到入狱(一)
  • 数据挖掘与机器学习——分类算法
  • 变压器励磁涌流MATLAB仿真模型
  • ToxVidLLM:一个用于检测有害视频的多模态多任务框架
  • 比较(二)利用python绘制雷达图
  • Visual Studio怎么用?
  • Python工程中,__init__.py文件有什么用
  • YOLOv10环境搭建推理测试
  • tomcat-memcached会话共享配置
  • 404错误页面源码,简单实用的html错误页面模板
  • AI程序员来了,大批码农要失业
  • 车联网安全入门——CAN总线模糊测试
  • JDBC常见异常(10)—预编译模式下占位符动态排序字段失效
  • 爬虫入门教程:爬虫概述
  • 【工具】windows下VMware17解锁mac安装选项(使用unlocker427)
  • JS 自测题 —— 手写 class
  • Keras深度学习框架实战(7):使用YOLOV8和KerasCV进行高效的图像物体识别
  • Django视图层探索:GET/POST请求处理、参数传递与响应方式详解
  • 磁盘配额的具体操作
  • STM 32_HAL_SDIO_SD卡
  • 人脸识别系统之动态人脸识别
  • Opencv实用笔记(一): 获取并绘制JSON标注文件目标区域(可单独保存目标小图)
  • LabVIEW在高校电力电子实验中的应用
  • rtsp python实现
  • RHCE (Linux进阶) Ubuntu 操作系统安装教程
  • vue-router 源码分析——1. 路由匹配
  • 百度云下载不限速方式集合
  • 2024年6月1日 (周六) 叶子游戏新闻
  • MathorCup挑战赛获奖名单公示,第九届研讨会及颁奖典礼即将举行
  • vulnhub靶机xptosystem