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>  <!--取反-->
  • 相关阅读:
    JavaScript词法结构
    【python】类变量、实例变量
    把pandas dataframe转为list方法
    list 删除一个元素的三种做法--python
    Web.config中rewite 节点引起的500.19错误
    extjs让按钮可用或者不可用
    VS2010启动奔溃
    迟来的年终总结
    Nginx配置多个server
    RestSharp的简单用法
  • 原文地址:https://www.cnblogs.com/luwanying/p/9405822.html
Copyright © 2011-2022 走看看