zoukankan      html  css  js  c++  java
  • angularcli 第三篇(数据循环*ngFor、条件判断*ngIf)

    1、数据循环 *ngFor

    (1)普通循环

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

    (2)遍历数组同时获取索引值key

    <ul>
        <li *ngFor = "let item of list; let i = index;" >
            {{ item }}  --{{ i }}
        </li>
    </ul>

    (3)template 循环

    <ul>
        <li template = "ngFor let item of list" >
            {{ item }}
        </li>
    </ul>

    例:对象内部嵌套数字,多重循环

    <!-- 在compontent.ts 文件里定义数组 -->
    export class NewsComponent implements OnInit {

    public list:any[];

    constructor() { 

    this.list4=[

    {

    'catename':"宝马",

    "list":[

    {'title':'宝马x1'},
    {'title':'宝马x3'},
    {'title':'宝马x2'},
    {'title':'宝马x4'},

    ]

    } ,{

    'catename':"奥迪",

    "list":[

    {'title':'奥迪q1'},
    {'title':'奥迪q2'},
    {'title':'奥迪q3'},
    {'title':'奥迪q4'},
    ]

    },

    ]

    }

    ngOnInit() {

    }

    }

    <!-- HTML文件里循环数组 -->
    <ul>
        <li *ngFor = "let item of list; let i = index;" >
            {{ item.dog }}  --{{ i }}
            <ol>
                <li *ngFor = "let cat of item.list" > {{ cat.title }} </li>
            </ol>
        </li>
    </ul>

     

    2、条件判断 *ngIf

    <!--条件判断语句-->
    
    <div *ngIf="flag">flag=true的情况下面显示1</div>
    
    <br>
    
    <button (click)='flag=!flag'>执行方法改变flag</button>  <!--取反-->
  • 相关阅读:
    MFC弹出模拟对话框
    ansible中的playbook详解
    django后台管理--添加自定义action
    django后台管理-ModelAdmin对象
    django表单的api
    puppet的配置
    git常用命令
    HAProxy的日志配置以及ACL规则实现负载均衡
    HAproxy的安装与配置讲解
    实时监测网络流量
  • 原文地址:https://www.cnblogs.com/luwanying/p/9405822.html
Copyright © 2011-2022 走看看