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>  <!--取反-->
  • 相关阅读:
    洛谷—— P3353 在你窗外闪耀的星星
    洛谷—— P1238 走迷宫
    洛谷—— P1262 间谍网络
    9.8——模拟赛
    洛谷—— P1189 SEARCH
    算法
    May 22nd 2017 Week 21st Monday
    May 21st 2017 Week 21st Sunday
    May 20th 2017 Week 20th Saturday
    May 19th 2017 Week 20th Friday
  • 原文地址:https://www.cnblogs.com/luwanying/p/9405822.html
Copyright © 2011-2022 走看看