tip:数据的定义需要在对应ts中进行,调用在html中

  定义数组:

  ts中 public arr =["111","222","333"];

  html中

  <li *ngFor="let item of  arr">{{item}}</li>


指定数据类型

  ts中

  1. public list:any[]=["我是1号",“我是2号”,“我是3号”];
  2. public items:Array<any>=["我是1号",“我是2号”,“我是3号”];

  这两种方式可以任选其一都可以

  html中

    <li *ngFor = let item of list>{{item}}</li>  


定义数组(数组中存放对象)

  ts中:

  public userList:any=[

  {username:"rock",age:20},

  {username:"roy",age:"23"},

  {username:"luck",age:"214"}

]

html中

  <li *ngFor="let item of userList">

    <p>{{item.username}}</p><p>{{item.age}}</p>

  </li>


多重循环嵌套

在ts中  

public cars:any[]=[
      {cate:"宝马",
    list:[
      {name:"宝马X1",price:"20w"},
      {name:"宝马X2",price:"30w"},
      {name:"宝马X3",price:"40w"}
     ]
     },
         {
   cate:"奥迪",
   list:[
     {name:"奥迪Q1",price:"40w"},
     {name:"奥迪Q2",price:"50w"},
     {name:"奥迪Q3",price:"60w"}
    ]
  }
]

在HTML中

<div>
  <ul>
    <li *ngFor="let item of cars">
      <p>{{item.cate}}</p>
      <span *ngFor="let item of item.list">{{item.name}}--{{item.price}}</span>
    </li>
   </ul>
</div>

Ng的数组绑定的更多相关文章

  1. mvc数组绑定-jquery ajax

    var list=[];//数组 list[0]=1001; list[1]=1002; list[1]=1003; var json_data = { selected: list}; $.ajax ...

  2. EmberJs之数组绑定@each&[]

    写在前面 好长时间没有写博客了,昨天花了些时间又整理了下之前发布过的<Ember.js之computed Property>文章,并创建了一个测试代码库,花了些时间,希望能使用测试代码的方 ...

  3. asp.net mvc int[] 和 string[] 自定义数组绑定

    新建类,int[]数组模型绑定 using System; using System.Collections.Generic; using System.Linq; using System.Web; ...

  4. 给js创建的一个input数组绑定click事件

    <html> <body> <input type="button" name="input[]" value="按钮1 ...

  5. 使用C# .NET 将结构数组绑定到 Windows 窗体的方法

      本任务的内容 概要 要求 设计结构 向数组添加结构实例 将结构成员绑定到窗体控件 提供浏览数组的方式 分步示例 参考 概要 本文介绍如何向 Windows 窗体绑定结构数组. 该示例由一个 Win ...

  6. Spring MVC数组绑定

    需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...

  7. Repeater绑定数组并显示其值

    web开发中,尤其是对于数据展示,不得不说Repeater是一个万能的控件,而且使用也很方便. 在ASP.NET中将数组绑定到Repeater中请问如何在Repeater前台页面中显示该数组的值? s ...

  8. ASP.NET MVC数组模型绑定

    在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type="text" name ...

  9. MVC数组模型绑定

    ASP.NET MVC数组模型绑定   在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type=& ...

随机推荐

  1. 树莓派4B NAS系统搭建

    一.硬盘挂载 由于之前硬盘(NTFS格式)里有数据不想格式化想直接挂载,就没有格式化成ext4文件格式的. 安装ntfs-3g sudo apt-get install ntfs-3g 加载内核模块 ...

  2. Oracle数据库之七 多表查询

    七.多表查询 ​ 对于查询在之前已经学过了简单查询.限定查询.查询排序,这些都属于 SQL 的标准语句,而上一章的单行函数,主要功能是为了弥补查询的不足. ​ 而从多表查询开始就正式进入到了复杂查询部 ...

  3. 【Offer】[39] 【数组中出现次数超过一半的数字】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如,输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数 ...

  4. PHP 异或 算法

    /** * PHP字符串“异或”算法 * param array key * @param Request $request * @return mixed|string|void */ public ...

  5. cobbler高可用方案

    一.环境准备 主网IP 私网IP 主机名 角色 VIP 10.203.178.125 192.168.10.2 cnsz22VLK12919 主 10.203.178.137,192.168.10.1 ...

  6. Mysql高手系列 - 第10篇:常用的几十个函数详解,收藏慢慢看

    这是Mysql系列第10篇. 环境:mysql5.7.25,cmd命令中进行演示. MySQL 数值型函数 函数名称 作 用 abs 求绝对值 sqrt 求二次方根 mod 求余数 ceil 和 ce ...

  7. charles 黑名单

    本文参考:charles 黑名单 charles 黑名单 功能:阻止对匹配HOST的请求:可以直接把请求丢掉,也可以直接返回403状态码: 我一般用黑名单工具来block一些软件的自动上传功能 黑名单 ...

  8. TestNG(八) 类分组测试

    package com.course.testng.groups; import org.testng.annotations.Test; @Test(groups = "stu" ...

  9. 2019-2020-1 20199314 <Linux内核原理与分析>第二周作业

    1.基础学习内容 1.1 冯诺依曼体系结构 计算机由控制器.运算器.存储器.输入设备.输出设备五部分组成. 1.1.1 冯诺依曼计算机特点 (1)采用存储程序方式,指令和数据不加区别混合存储在同一个存 ...

  10. 38 (OC)* 进程、线程、堆栈

    一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcode,系统就会分别启动2个进程 通过“ ...